html - 为什么firefox显示框与Safari、IE、Chrome等不同？

Question

我一直在解决这个微小但非常烦人的跨浏览器 CSS 问题:出于某种原因，Firefox 显示的框/输入字段的尺寸与其他浏览器不同。看来 Firefox 在某种程度上忽略了 box-sizing: border-box 并且仍然通过自己的措施来测量盒子。这里面是什么原因呢？有没有泡泡糖可以解决这个问题？我已经准备好了。

我在这里做的是动态 jquery 输入字段加法器。加号按钮旁边的字段是“假字段”，由于某种原因，它在 Firefox 中显示不同:

文档类型:XHTML 1.0 严格

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 使用不同的框大小，因为它以不同的方式测量框(我还将元素设置为内联 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;
}