12

我真的很喜欢 CSS 的 box-sizing 属性。在 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>
4

3 回答 3

24

Firefox 实现了一个名为（非常不言自明）-moz-box-sizing的额外值。padding-box我怀疑这个属性一直处于“前缀地狱”的原因——如果你愿意的话——是因为padding-boxMozilla 引入的值只是最近才添加到规范中而没有其他实现，如果出现这种情况，它可能会从规范中删除在 CR 之前或期间，其他实现仍然没有出现。

不幸的是，Firefox 4 仍然需要前缀，并且多年来一直这样做：

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

box-sizing话虽如此，Firefox 终于从29 版开始提供无前缀版本。我相信padding-box仍然支持实验值，但它仍然存在风险。再说一次，你需要使用的几率padding-box非常低，所以你可能没什么好担心的。border-box风靡一时，不像padding-box不会很快消失。

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

另请参阅MDN上的文档。

于 2011-04-29T07:28:15.583 回答
4

根据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;
于 2011-04-29T07:33:38.280 回答
3

这是一个相当老的线程，但因为它仍然在谷歌结果的第一页上......

这些参数可以在 CSS 重置中全局设置

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

您还可以使用全局div分配或创建一个类以应用于单个元素，如果您需要使用它来获得细化。

于 2013-08-01T17:43:49.833 回答