如何让CSS按钮宽度在MSIE和Chrome中相同？

Question

我在使最新版本的Internet Explorer（9）看起来与Google Chrome（26.0.1）相同时出现问题。

内容 我有两个按钮之一被使用称为类：.linkBtn 另一按钮被使用称为类：.buynowBtn 我曾尝试通过使用“最小宽度将它们设置为同时为85px宽：85px ;” 但是，在MSIE中，两个按钮的宽度均为104像素，而在Google Chrome中虽然LinkBtn为104像素，但buynowBtn为106像素！

CODE 这里是代码相关的CSS行：

.lot .lotDesc .linkBtn, .lot .lotDesc .linkBtnFinal{ /* (TJ-NEW) new style ".lot .lotDesc .linkBtnFinal" added for finalise button */ 
    position:absolute; 
    left:8px; 
    bottom:0; 
    } 
    .linkBtn,.linkBtnFinal{ /* (TJ-NEW) new style ".linkBtnFinal" added for finalise button */ 
    position:relative; 
    display:inline-block; /* (TJ-NEW) required to standardise button widths */ 
    float:left;/* (TJ-NEW) required to standardise button widths */ 
    } 
    .linkBtn a{ 
    min-width:85px; 
    margin-bottom:3px; 
    } 
    .buynowBtn{ 
    position:relative; 
    display:inline-block; /* (TJ-NEW) required to standardise button widths */ 
    float:left; /* (TJ-NEW-180313) */ 
    } 
    .buynowBtn a{ 
    /* CSS3 Corner Radius */ 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
    /* (TJ-NEW) the following has been added to standardise button widths */ 
    min-width:85px; 
    display:block; 
    text-align:center; 
    } 
    .linkBtn a{ 
    color:#fff!important; 
    font-size:12px!important; 
    padding:0.1em 1em; /* (TJ-NEW) ? padding adjustment previously entered had been rolled back! */ 
    font-weight:normal; 
    text-decoration:none!important; 
    background:#BF2A48 ; /* Old browsers */ 
    /* CSS3 Gradient Background */ 
    background:-moz-linear-gradient(top, #BF2A48 0%, #BF2A48 49%, #9B0624 51%, #9B0624 100%); /* FF3.6+ */ 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#BF2A48), color-stop(49%,#BF2A48), color-stop(51%,#9B0624), color-stop(100%,#9B0624)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* Chrome10+,Safari5.1+ */ 
    background:-o-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* Opera 11.10+ */ 
    background:-ms-linear-gradient(top, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* IE10+ */ 
    background:linear-gradient(to bottom, #BF2A48 0%,#BF2A48 49%,#9B0624 51%,#9B0624 100%); /* W3C */ 
    /*filterrogidXImageTransform.Microsoft.gradient(startColorstr='#BF2A48 ', endColorstr='#9B0624',GradientType=0); *//*IE6-8 */ /* (TJ-NEW) commented out IE style, as not working anyway and causes issue with fixed width */ 
    /* CSS3 Corner Radius */ 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
    /* (TJ-NEW) the following has been added to standardise button widths */ 
    display:block; 
    text-align:center; 
    } 
    .linkBtn a:hover{ 
    color:#fff; 
    text-decoration:none; 
    background: #9B0624; 
    } 



    .buynowBtn a{ 
    color:#fff!important; 
    font-size:12px!important; 
    padding:0.1em 1em; /* ******* Updated to match place bid (TJ) ******* */ 
    font-weight:normal; 
    text-decoration:none!important; 
    background:#888; /* Old browsers */ 
    /* CSS3 Gradient Background */ 
    background:-moz-linear-gradient(top, #888 0%, #888 49%, #666 51%, #666 100%); /* FF3.6+ */ 
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(49%,#888), color-stop(51%,#666), color-stop(100%,#666)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* Chrome10+,Safari5.1+ */ 
    background:-o-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* Opera 11.10+ */ 
    background:-ms-linear-gradient(top, #888 0%,#888 49%,#666 51%,#666 100%); /* IE10+ */ 
    background:linear-gradient(to bottom, #888 0%,#888 49%,#666 51%,#666 100%); /* W3C */ 
    /* filterrogidXImageTransform.Microsoft.gradient(startColorstr='#888', endColorstr='#666',GradientType=0); *//* IE6-8 */ /* (TJ-NEW) commented out IE style, as not working anyway and causes issue with fixed width */ 
    } 
    .buynowBtn a:hover{ 
    color:#fff; 
    text-decoration:none; 
    background: #444; 
    } 
    .buynowBtn{ 
    position:relative; 
    display:inline-block; /* (TJ-NEW) required to standardise button widths */ 
    float:left; /* (TJ-NEW-180313) */ 
    } 
    .buynowBtn a{ 
    /* CSS3 Corner Radius */ 
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em; 
    border-radius: 1em; 
    /* (TJ-NEW) the following has been added to standardise button widths */ 
    min-width:85px; 
    display:block; 
    text-align:center; 
    } 

有什么想法？ - 我尝试使用“宽度：”而不是“最小宽度”，但文本似乎包装到两条线上，这是一场灾难。

与感谢

Ĵ

Answer 1

有很多原因，这可能会发生，从盒模型的差异，到了所使用的字体不同种种。

你仍然可以做IE只CSS是这样的：

<!--[if IE 9]--><link to your CSS /><!--[endif]--> 

有几个选项有哪些让你针对IE（例如）的特定版本

<!--[if IE]-->targets all versions of IE<!--[endif]--> 
<!--[if IE 9]-->targets IE 9 only<!--[endif]--> 
<!--[if lt IE 8]-->targets versions 7 and below of IE (lt: <)<!--[endif]--> 
<!--[if gte IE 8]-->targets versions 8 and up of IE (gte: >=)<!--[endif]--> 

如果按钮绝对必须是像素完美的，但是，请尝试使用图像。