Firefox 4 ignoring box-sizing?

Asked 29/4, 2011 at 6:58 Answered 1/8, 2013 at 17:43

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>

Faircloth answered 29/4, 2011 at 6:58 Comment(2)

Can you show your code? CSS and markup – Ausgleich 29/4, 2011 at 7:18

Good news, firefox v29 now supports box-sizing without the moz prefix. See caniuse and jsfiddle.net/danield770/XAY5g (It works - I just tried it out) – Hankering 18/5, 2014 at 9:8

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.

Simulate answered 29/4, 2011 at 7:28 Comment(4)

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.) – Vargas 30/4, 2011 at 2:45

This still seems to be the case in Firefox 20. – Mccreery 14/4, 2013 at 18:19

@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. – Simulate 14/4, 2013 at 18:22

It's 2014 and firefox still doesn't support non-prefixed box-sizing. Super lame... – Freeboard 7/1, 2014 at 19:24

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;

Ausgleich answered 29/4, 2011 at 7:33 Comment(5)

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 ;) – Faircloth 29/4, 2011 at 7:41

I'm afraid until it's officially supported you're just going to have to keep using the vendor specific version. – Ausgleich 29/4, 2011 at 7: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. – Faircloth 29/4, 2011 at 7:48

@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. – Simulate 29/4, 2011 at 8: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. – Ausgleich 29/4, 2011 at 8:38

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.

Varicotomy answered 1/8, 2013 at 17:43 Comment(0)

Recommended topics

Hot tags