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

我一直在解决这个很小但非常恼人的跨浏览器CSS问题：出于某种原因，Firefox显示的框/输入字段与其他浏览器不同。firefox似乎在某种程度上忽略了框大小：边框框，并且仍然用自己的方法来测量框。这里的原因是什么？有没有泡泡糖的解决方案？我准备好了

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

Doctype:XHTML1.0严格

CSS:

---

我不知道firefox为什么会这样做，但我总是遇到这个问题，上一次我的解决方案是设置

border:none并添加一个（类似输入）的img作为背景，伪造一个输入字段，这样每个输入都将是相同的大小

顺便说一句，如果我没有错的话，Opera的尺寸也有另一个问题。
好的，我用盒子尺寸解决了这个问题。似乎我需要为firefox使用不同的框大小，因为它测量框的大小不同（我也将元素设置为inline block，但我不确定最终是否与此有关）更多内容：

事实上，这似乎是border的问题，也是firefox如何衡量它的问题。我已经读过，框大小应该可以解决这个问题，但要么我没能使用它，要么就是它不能正常工作。我尝试过很多事情，比如css重置、固定值、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;
}

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;
}