2

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

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

在此处输入图像描述

文档类型：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;
}
4

2 回答 2

1

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

顺便说一句，如果我没记错的话，Opera 的尺寸也有另一个问题。

于 2013-01-04T11:14:14.910 回答
1

好的，我用 box-sizing 解决了这个问题。似乎我需要为 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;
}
于 2013-01-04T12:03:26.450 回答