The best css evar
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}W3C really screwed up the box model. This will make your webs better. (It doesn’t work in IE7, but why are you still supporting it anyway?)
Written by Paul
Related protips
5 Responses
I dont understand what you did mean about W3C screwed up. W3C dont like Box Sizing?
The default box sizing is content-box, which in my opinion is counter-intuitive. When I specify the width of an element, I'd expect it to be the entire visible element, including padding and border. The traditional box model, to me, makes more sense.
Side note, IE6 is border-box by default. IE7 changed it to follow W3C standards eventually. Perhaps one of those times IE got it right. They're quite the hipster it appears. ;)
Yes, and since IE7 does not support the box-sizing property, there's no way to fix it. :)
I wouldn't say W3C screwed up. IE6 was using border-box and switched to content-box eventually in IE7. The other browsers were all using content-box back then and W3C standards embraced content-box. When IE7 came along, they flipped to content-box, but it doesn't provide a box-sizing CSS property which became essential 5 years later (IE7 is released in 2006). As Paul mentioned, it does seem more intuitive to have it border-box after all. It is hard for W3C to envision this is going to be the way people prefer things so many years ago too; I'm just glad there's a box-sizing attribute to give more options to developers.
Have a fresh tip? Share with Coderwall community!
