问题
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?
回答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
来源：https://stackoverflow.com/questions/10722841/box-sizing-border-box-to-border-box-or-not-to-border-box-all-elements