* {Box-size: border-box; }: Are all the elements framed or not framed?

Question

I will begin to develop a new website, and I am going to deal with various methods that browsers use to calculate the width and height of elements ( box reference material ). For some reason, it occurred to me: what if I just applied box-sizing to all elements of the website?

I am one of those who believe that box-sizing: border-box; - One of the best teams in CSS, with all its limitations. However, the same limitations are those that 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 site should be compatible with as many browsers as possible, and box-sizing poses a few questions when we think about IE7. However, sometimes the schedule is so tight that it would be great to get a few extra minutes without worrying about this particular problem.

In any case, do you think that the use of box-sizing:border-box; to all elements is a good policy or should I continue to do this only for those elements that really need it?

Answer 1

I think this is a great idea. In fact, I will start to do the same on my sites.

Here Paul talks about using this in the same way.

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

We used * {box-sizing: border-box;} in one of my projects (deployed in production, an average of more than 1 million visits per month) at work for about a year now, and it seems to be holding on well. The project was tested in IE8 and 9, and the flippers - Firefox and Chrome versions, and we had no problems. All jQuery offsets (+ UI) calculations and animations are performed perfectly, even in any element that we have displayed as an inline block. Recently, we started testing the project on mobile devices (iPhone, iPad and Android), and we had no questions about the size of the box with any of them, so it seems to work just fine.

I found this to help solve problems in IE7

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