Question

我的jsp页面上有几个按钮，我使用的样式为：

*.buttonblue {
    background-color: #003366;
    border-color: #99CCFF;
    color: #FFFFFF;
    font-family: Verdana,Arial,Helvetica;
    font-size: 8pt;
    font-weight: bold;
    height: 20px; 
    display:inline;
    line-height: 1.2;
    text-align: center; 
         margin-top: 2px; 
}*

在Firefox中，按钮比IE6小一点。我无法定义按钮的大小，因为标题会相应地改变按钮大小的变化。

我尝试使用width：auto但没有成功。此外，溢出：可见IE中的按钮变小。

请帮忙。

Answer 1

IE has a bug with button padding，您可能正在体验这一点。尝试这样的事情：

input.button {
    padding: 0 .25em;
    width: 0;  /* IE table-cell margin fix */
    overflow: visible;
}

input.button[class] {  /* IE ignores [class] */
    width: auto;  /* cancel margin fix for other browsers */
}

注意：如果在应用此修复程序后IE中的按钮变得更小，请确保您没有处于怪癖模式。在IE的怪癖模式中，对象的宽度计算方式与标准模式不同，使得所有内容都更小（对于具有指定宽度的项目）。如果您期望一致的跨浏览器结果，最好始终使用标准模式（即使IE的标准模式不是那么好，它仍然比quirks模式更标准。）

Answer 2

使用Conditional Comments：

例如：

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

或者设置仅由IE读取的输入的自定义宽度，如下所示：

    .buttonblue { 
background-color: #003366; 
border-color: #99CCFF; 
color: #FFFFFF; 
font-family: Verdana,Arial,Helvetica; 
font-size: 8pt; 
font-weight: bold; 
height: 20px; 
display:inline; 
line-height: 1.2;
text-align: center; 
margin-top: 2px; 
width: 100px; /* Read by FF */
#width:100px; /* Read by IE*/
}

现在你可以相应调整它们

Answer 3

按钮会被呈现，但浏览器会决定。如果您希望图像在所有浏览器中看起来都相同，则需要使用图像并将其设置为像按钮一样工作。

IE和Firefox中的按钮大小不相等

3 个答案: