我非常喜欢CSS的盒子尺寸属性。 在Chrome，IE8 +和Opera（不知道从哪个版本开始）这是支持的。 Firefox 4似乎忽略了它。
我知道有-moz-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>最满意答案
Firefox使用称为padding-box的额外值实现-moz-box-sizing （非常明显）。 我怀疑这个属性在“前缀地狱”中的原因 - 如果你愿意的话 - 是由Mozilla引入的padding-box值最近才被添加到规范中 ，没有其他实现，并且它可以从该规范是否其他实现仍然不在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; }话虽如此，Firefox终于在第29版开始提供box-sizing前提。我相信实验padding-box价值仍然受到支持，但仍然存在风险。 再次，你需要使用padding-box的几率非常低，所以你可能没有什么可担心的。 border-box是所有的愤怒，而不像padding-box不会很快消失。
因此，简而言之：如果您不关心最新版本以外的任何内容，则不再需要前缀。 否则，如果你已经有了这个前缀，那么保留它一段时间是没有害处的。
另请参阅MDN上的文档。
Firefox implements -moz-box-sizing with an extra value called padding-box (pretty self-explanatory). I suspect that the reason this property has been in "prefix hell" — if you will — is that the padding-box value, 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:
.inner { width: 100%; height: 100%; background-color: #ff0000; border: 1px solid #fff; -moz-box-sizing: border-box; box-sizing: border-box; }That being said, Firefox has finally begun shipping with box-sizing unprefixed as of version 29. I believe the experimental padding-box value is still supported, but it's still at-risk. Then again, the odds that you will need to use padding-box are extremely low, so you probably have nothing to worry about. border-box is all the rage, and unlike padding-box isn'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.
更多推荐
发布评论