css - Firefox 4 ignoring box-sizing? -


i love box-sizing property of css. in chrome, ie8+ , opera (don´t know since version) supported. firefox 4 seems ignore it.

i know there -moz-box-sizing property, have write every time want change 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 implements -moz-box-sizing value called padding-box (pretty self-explanatory). suspect reason property has been in "prefix hell" — if — padding-box value, being introduced mozilla, added spec no other implementations, , may removed spec if other implementations still don't surface or during cr.

unfortunately, firefox 4 still requires prefix, , has continued 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 begun shipping box-sizing unprefixed of version 29. believe experimental padding-box value still supported, it's still at-risk. again, odds need use padding-box extremely low, have nothing worry about. border-box rage, , unlike padding-box isn't going away anytime soon.

so, in short: if don't care other latest version, no longer need prefix. otherwise, if have prefix, there's no harm keeping around while.

also see documentation on mdn.


Comments

Post a Comment