Button 如何使MSIE和Chrome中的CSS按钮宽度相同?
我在使最新版本的InternetExplorer(9)看起来与GoogleChrome(26.0.1)一样时遇到了一个问题 总结 我有两个按钮,一个是使用名为:.linkBtn的类 另一个按钮使用名为:.buynowBtn的类 我尝试使用“min width:85px 但是在MSIE中,两个按钮都有104像素宽。。。而在谷歌Chrome中,虽然LinkBtn是104px,但buynowBtn是106px 代码 以下是相关的CSS代码行:Button 如何使MSIE和Chrome中的CSS按钮宽度相同?,button,width,css,Button,Width,Css,我在使最新版本的InternetExplorer(9)看起来与GoogleChrome(26.0.1)一样时遇到了一个问题 总结 我有两个按钮,一个是使用名为:.linkBtn的类 另一个按钮使用名为:.buynowBtn的类 我尝试使用“min width:85px 但是在MSIE中,两个按钮都有104像素宽。。。而在谷歌Chrome中,虽然LinkBtn是104px,但buynowBtn是106px 代码 以下是相关的CSS代码行: .lot .lotDesc .linkBtn, .
.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;
}
有什么想法吗?
-我试着使用“宽度:”而不是“最小宽度”,但文本似乎被分成两行,这是一场灾难
谢谢
J发生这种情况的原因有很多,从盒子模型的不同,到使用的字体的不同 你仍然可以这样做IE-only CSS:
<!--[if IE 9]--><link to your CSS /><!--[endif]-->
这里有几个选项可以让您针对特定版本的IE(例如)
以IE的所有版本为目标
仅针对IE 9
针对IE版本7及以下(lt:针对IE版本8及以上(gte:>=)
如果按钮绝对必须是像素完美的,那么尝试使用图像来代替。你能添加相关的html吗?只是关于按钮的特定部分…如果你在js fiddle中设置它,我们都可以使用CSS/html…类似这样:元素的实际宽度是
[内容框的宽度(宽度)]+[左/右填充]+[左/右边框宽度]
:我只把IE的不同版本作为最后的手段-你真的想维护那么多浏览器特定的样式表吗?我会尝试剥离所有相关按钮的CSS,并逐步将其重新构建,直到你看到造成差异的原因。这样,以后它将更易于维护(您将了解如何使其跨浏览器兼容)。还可以给您一个重构CSS的机会—例如,您有多个对“.buynowBtn a”的引用。
<!--[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]-->