* { Box-sizing: border-box; } : To border-box or n

Question

I will start developing a new website, and I'm getting ready to deal with the different methods browsers use to calculate width and height of elements (box model stuff). Somehow, it came to my mind: what if I just apply box-sizing to all elements in the website?

I'm one of those who believe that box-sizing: border-box; is one of the best commands there is in CSS, with all its limitations. However, those same limitations are the ones who make me wonder if I should apply box-sizing to all elements:

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

Of course my website should be compatible with as much browsers as possible, and box-sizing creates a few questions when we think about IE7-. However, sometimes the schedule is so tight that it would be great to gain a few extra minutes by not worrying about this specific issue.

Anyway, do you think that applying box-sizing:border-box; to all elements is a good policy or should I keep doing so only to the elements that actually need it?

Answer 1

I think it is a great idea. In fact I will start doing the same on my websites.

Here Paul talks about using it in that same fashion

http://paulirish.com/2012/box-sizing-border-box-ftw/

We've been using *{box-sizing: border-box;} in one of my projects (deployed in production, averaging over 1mln visits a month) at work for about a year now, and it seems to be holding up just fine. The project has been tested in IE8 & 9 and the latests Firefox and Chrome versions and we've had no problems. All jQuery (+UI) offset calculations and animations run fine, even in any element we've displayed as inline-block. As of late we've started testing the project on mobile devices (iPhone, iPad and Android) and we've had no issues regarding box-sizing with any of them yet, so it seems to work just fine.

I found this to help take care of the issues in IE7

https://github.com/Schepp/box-sizing-polyfill