Menu
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>
600
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.
51
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.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
