Firefox 4 忽略盒子大小？
我真的很喜欢 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>
I really love the box-sizing property of CSS. In Chrome, IE8+ and Opera (don´t know since which version) this is supported. Firefox 4 seems to ignore it.
I know there is the -moz-box-sizing property, but do I really have to write it every time I want to change the box-sizing type?
Code
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
Firefox 实现了
-moz-box-sizing并带有一个名为padding-box的额外值（非常不言自明）。我怀疑这个属性之所以陷入“前缀地狱”——如果你愿意的话——是 Mozilla 引入的padding-box值最近才添加到 spec 没有其他实现，如果其他实现仍然没有出现，它可能会从规范中删除或在 CR 期间。不幸的是，Firefox 4 仍然需要前缀，并且已经持续这样做了很多年：
话虽这么说，Firefox 终于开始在版本 29 中开始使用不带前缀的
box-sizing。我相信实验性的padding-box值仍然受支持，但仍然存在风险。话又说回来，您需要使用 padding-box 的可能性非常低，因此您可能无需担心。border-box非常流行，而且与padding-box不同，它不会很快消失。所以，简而言之：如果您不关心最新版本以外的任何内容，则不再需要前缀。否则，如果您已经有了前缀，保留它一段时间也没有什么坏处。
另请参阅 MDN 上的文档。
Firefox implements
-moz-box-sizingwith an extra value calledpadding-box(pretty self-explanatory). I suspect that the reason this property has been in "prefix hell" — if you will — is that thepadding-boxvalue, being introduced by Mozilla, was only recently added to the spec with no other implementations, and it may be removed from the spec if other implementations still don't surface by or during CR.Unfortunately, Firefox 4 still requires the prefix, and has continued to do so for a good number of years:
That being said, Firefox has finally begun shipping with
box-sizingunprefixed as of version 29. I believe the experimentalpadding-boxvalue is still supported, but it's still at-risk. Then again, the odds that you will need to usepadding-boxare extremely low, so you probably have nothing to worry about.border-boxis all the rage, and unlikepadding-boxisn't going away anytime soon.So, in short: if you don't care about anything other than the latest version, you no longer need the prefix. Otherwise, if you already have the prefix, there's no harm keeping it around for a while.
Also see the documentation on MDN.
根据 https://developer.mozilla.org/en/CSS/box-sizing 您需要使用 -moz-box-sizing 才能在 FireFox 中获得效果。这对于 CSS3 扩展来说相当常见，大多数浏览器供应商都使用供应商前缀，直到他们满意实现符合规范为止。您还必须使用其他主要浏览器的供应商前缀。幸运的是，您可以指定全套标准和供应商特定属性来实现此目的，而不会产生任何不良影响。
According to https://developer.mozilla.org/en/CSS/box-sizing you need to use -moz-box-sizing to get the effect to work in FireFox. This is fairly common for CSS3 extensions, most browser vendors use a vendor prefix until they're satisfied that the implementation matches the spec. You'll have to use vendor prefixes for the other major browsers as well. Fortunately you can specify the full set of both standard and vendor specific properties to achieve this with no ill effects.
这是一个相当古老的线程，但由于它仍然位于谷歌结果的第一页上...
这些参数可以在 CSS 重置中全局设置，
您也可以使用全局
div分配或创建一个类如果您需要更精细地应用到单个元素。This is a rather old thread, but since it's still on the first page of google results...
These perameters can be set globally in a CSS reset
you can also use a global
divassignment or create a class to apply to individual elements if you need to get that granular with it.