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

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 但没有成功。此外，使用 overflow:visible IE 中的按钮变得更小。

请帮忙。

Answer 1

IE 有一个按钮填充错误，您可能正在遇到这个问题。尝试这样的事情：

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 的 quirks 模式中，对象宽度的计算方式与标准模式不同，这使得所有内容都变小了（对于具有指定宽度的项目）。如果您期望一致的跨浏览器结果，最好始终使用标准模式（即使 IE 的标准模式不是那么好，它仍然比 quirks 模式更标准）。