12

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>
BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
Van Coding
  • 22,412
  • 21
  • 81
  • 128
  • Can you show your code? CSS and markup – GordonM Apr 29 '11 at 07:18
  • 1
    Good news, firefox v29 now supports box-sizing without the moz prefix. See [caniuse](http://caniuse.com/css3-boxsizing) and http://jsfiddle.net/danield770/XAY5g/ (It works - I just tried it out) – Danield May 18 '14 at 09:08

3 Answers3

24

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.

BoltClock
  • 630,065
  • 150
  • 1,295
  • 1,284
  • 2
    Of course no one really implements "the standard box-sizing", since the 2004-era CR that claims to define it doesn't actually define how it works.... (In particular interaction of box-sizing with replaced element sizing is totally undefined, since the latter algorithm didn't exist back in 2004.) – Boris Zbarsky Apr 30 '11 at 02:45
  • 4
    This still seems to be the case in Firefox 20. – mpen Apr 14 '13 at 18:19
  • 1
    @Mark: I suspect it's because of the `padding-box` value which Firefox introduced with `-moz-box-sizing` but no other browser has implemented yet. It's now in the spec, but it may be dropped during CR if no one else implements it. I'll update my answer. – BoltClock Apr 14 '13 at 18:22
  • 2
    It's 2014 and firefox still doesn't support non-prefixed `box-sizing`. Super lame... – Kevin Beal Jan 07 '14 at 19:24
4

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;
GordonM
  • 29,211
  • 15
  • 77
  • 126
  • 3
    Yes I know. But firefox is at the moment the only browser that does not support box-sizing directly. I don´t write it 4 times when it works with writing it 2 times ;) – Van Coding Apr 29 '11 at 07:41
  • I'm afraid until it's officially supported you're just going to have to keep using the vendor specific version. – GordonM Apr 29 '11 at 07:44
  • BTW: What are this prefixes for? CSS ignores every unknown property, so they could support it directly from the beginnin instead of developing 2 versions of it... Also, this would save a lot of developers time. – Van Coding Apr 29 '11 at 07:48
  • 2
    @FlashFan: Vendor prefixes generally mean "this is experimental, not finalized; we're just mucking around so we'll use our own namespace first instead of polluting the standard properties" Eventually when the implementation is close enough to standards, they shed the prefixes. – BoltClock Apr 29 '11 at 08:17
  • As Bolt said, the vendor prefixes often denote features that are either not finalized in the CSS spec (such as when CSS 3 was still in its draft stages), or that they are implementing a feature but haven't exhaustively tested it against the published CSS spec. In the case of -moz-box-sizing it would be the latter. At some point in the future it will be replaced with the standard box-sizing property. They can occasionally also denote features unique to the rendering engine, but this is rare these days. – GordonM Apr 29 '11 at 08:38
3

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

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

you can also use a global div assignment or create a class to apply to individual elements if you need to get that granular with it.

kristina childs
  • 2,090
  • 1
  • 19
  • 19