Firefox 4 忽略盒子大小？答案

【问题标题】：Firefox 4 ignoring box-sizing?Firefox 4 忽略盒子大小？
【发布时间】：2011-04-29 06:58:24
【问题描述】：

我真的很喜欢 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>

【问题讨论】：

你能显示你的代码吗？ CSS 和标记
好消息，firefox v29 现在支持不带 moz 前缀的 box-sizing。请参阅 caniuse 和 jsfiddle.net/danield770/XAY5g（它有效 - 我刚刚尝试过）

标签： css firefox4

【解决方案1】：

Firefox 使用称为padding-box 的额外值实现-moz-box-sizing（不言自明）。我怀疑这个属性一直处于“前缀地狱”的原因——如果你愿意的话——是 Mozilla 引入的 padding-box 值最近才被添加到 spec 中，没有其他实现，它可能是如果在 CR 之前或期间仍未出现其他实现，则从规范中删除。

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

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

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

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

另请参阅MDN 上的文档。

【讨论】：

当然没有人真正实现“标准盒子尺寸”，因为声称定义它的 2004 年 CR 并没有真正定义它是如何工作的......（特别是带有替换元素大小的 box-sizing 完全未定义，因为后一种算法在 2004 年还不存在。）
在 Firefox 20 中似乎仍然如此。
@Mark：我怀疑这是因为 Firefox 使用 -moz-box-sizing 引入的 padding-box 值，但还没有其他浏览器实现。它现在在规范中，但如果没有其他人实现它，它可能会在 CR 期间被删除。我会更新我的答案。
现在是 2014 年，firefox 仍然不支持非前缀 box-sizing。超级蹩脚...

【解决方案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;

【讨论】：

是的，我知道。但是firefox是目前唯一不直接支持box-sizing的浏览器。当它可以写 2 次时，我不会写 4 次；）
恐怕在它得到正式支持之前，您将不得不继续使用供应商特定的版本。
顺便说一句：这个前缀是干什么用的？ CSS 会忽略所有未知属性，因此他们可以从一开始就直接支持它，而不是开发它的 2 个版本……而且，这将节省大量开发人员的时间。
@FlashFan：供应商前缀通常意味着“这是实验性的，没有最终确定；我们只是在胡闹，所以我们将首先使用我们自己的命名空间而不是污染标准属性”最终当实现时足够接近标准，他们去掉了前缀。
正如 Bolt 所说，供应商前缀通常表示未在 CSS 规范中最终确定的功能（例如当 CSS 3 仍处于草案阶段时），或者他们正在实施一项功能但尚未'没有根据已发布的 CSS 规范对它进行详尽的测试。在 -moz-box-sizing 的情况下，它将是后者。在将来的某个时候，它将被标准的 box-sizing 属性所取代。它们有时也可以表示渲染引擎特有的功能，但如今这种情况很少见。

【解决方案3】：

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

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

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

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

【讨论】：