{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Fickle 薄情 的问题《Firefox 4 ignoring box-sizing?》','https://www.manongdao.com/q-381329.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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>
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.
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
you can also use a global
divassignment or create a class to apply to individual elements if you need to get that granular with it.Firefox implements
-moz-box-sizingwith an extra value calledpadding-box(pretty self-explanatory). I suspect that the reason this property has been in "prefix hell" — if you will — is that thepadding-boxvalue, 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:
That being said, Firefox has finally begun shipping with
box-sizingunprefixed as of version 29. I believe the experimentalpadding-boxvalue is still supported, but it's still at-risk. Then again, the odds that you will need to usepadding-boxare extremely low, so you probably have nothing to worry about.border-boxis all the rage, and unlikepadding-boxisn'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.