Firefox 4 ignoring box-sizing?

2019-02-21 15:06发布

站内文章 / HTML/CSS
28 0 0

问题:

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>

回答1:

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.



回答2:

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;


回答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.



标签： css css3 firefox4
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~