为什么firefox显示盒与Safari，IE，Chrome等不同？

Question

我一直在处理这个微小但非常烦人的跨浏览器CSS问题：出于某种原因，Firefox使用与其他浏览器不同的测量值显示框/输入字段。似乎firefox以某种方式忽略了box-sizing：border-box并且仍然通过自己的措施测量框。这是什么原因？这有什么泡泡糖解决方案吗？我已经准备好了。

我在这里做的是动态jquery输入字段加法器。加号按钮旁边的字段是'fakefields'，由于某些原因在firefox中显示不同：

Doctype：XHTML 1.0 Strict

CSS：

.fakeinpfield {
        border: 1px solid #C2C2C2 !important;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px; 
}
input#fakeinpfield3 {
        width: 320px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;

}
input#fakeinpfield4 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}
input#fakeinpfield5 {
        width: 135px !important;
        margin-right: 6px;
        margin-top: 3px;
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
        height: 26px;
        padding: 0;
}

Answer 1

我不知道为什么firefox会这样做，但我总是遇到这个问题，上次我的解决方案是设置border: none;并添加一个（像输入一样）img作为背景，伪造一个输入字段这样每个输入都会有相同的大小。

顺便说一句，如果我没错，Opera也会遇到另一个问题。

Answer 2

好的我用盒子大小解决了它。好像我需要为firefox使用不同的box-sizing，因为它以不同的方式测量盒子（我也将元素设置为inline-block，但我不确定这到底是否与它有关）更多阅读：http://www.quirksmode.org/css/box.html

input#fakeinpfield3 {
        width: 318px !important;
        margin: 3px 6px 0 0;
        -moz-box-sizing: border-box; 
        box-sizing: content-box;
        height: 26px;
        padding: 0;
        display: inline-block;
}