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