Question

我真的很喜欢CSS的盒子大小。在Chrome，IE8 +和Opera（不知道从哪个版本）支持。 Firefox 4似乎忽略了它。

我知道有-moz-box-sizing属性，但每次我想改变box-sizing类型时我是否真的必须编写它？

代码

<html>
    <head>
        <style type="text/css">
            .outer{
                width:600px;
                height:100px;
                background-color:#00ff00;
                border:1px solid #000;
            }
            .inner{
                width:100%;
                height:100%;
                background-color:#ff0000;
                border:1px solid #fff;
                box-sizing:border-box;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

Answer 1

Firefox使用名为-moz-box-sizing的额外值实现padding-box（非常明显）。我怀疑这个属性在“前缀地狱”中的原因 - 如果你愿意 - 是由Mozilla引入的padding-box值最近才被添加到spec而没有其他实现，如果其他实现仍未在CR之间或CR期间显示，则可以从规范中删除它。

不幸的是，Firefox 4仍然需要前缀，并且已经持续了很多年：

.inner {
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

话虽如此，自版本29开始，Firefox终于开始使用box-sizing未加前缀的版本。我相信实验padding-box值仍然受支持，但它仍处于危险之中。再说一次，你需要使用padding-box的几率非常低，所以你可能没有什么可担心的。 border-box风靡一时，与padding-box不同，不会很快消失。

因此，简而言之：如果您不关心最新版本以外的任何内容，则不再需要前缀。否则，如果你已经有了前缀，那么保持它一段时间是没有害处的。

另请参阅MDN上的文档。

Answer 2

根据https://developer.mozilla.org/en/CSS/box-sizing，您需要使用-moz-box-sizing来使效果在FireFox中起作用。这对于CSS3扩展来说相当普遍，大多数浏览器供应商使用供应商前缀，直到他们对实现与规范匹配感到满意为止。您还必须为其他主要浏览器使用供应商前缀。幸运的是，您可以指定标准和供应商特定属性的完整集合来实现此目的，而不会产生任何不良影响。

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

Answer 3

这是一个相当古老的主题，但因为它仍然在google结果的第一页......

可以在CSS重置

中全局设置这些参数

*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

您还可以使用全局div作业或创建一个类来应用于单个元素，如果您需要使用它进行细化。

Firefox 4忽略了盒子大小调整？

3 个答案: