css - * { 盒子尺寸 : border-box; } : To border-box or not to border-box all elements?

Question

我将开始开发一个新网站，并准备处理浏览器用于计算元素宽度和高度的不同方法 (box model stuff)。不知何故，我想到了:如果我只是将 box-sizing 应用于网站中的所有元素会怎么样？

我是那些相信 box-sizing: border-box; 是 CSS 中最好的命令之一的人之一，但也有它的局限性。然而，这些相同的限制让我想知道我是否应该将 box-sizing 应用于所有元素:

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

当然，我的网站应该与尽可能多的浏览器兼容，box-sizing 在我们考虑 IE7- 时会产生一些问题。但是，有时日程安排非常紧，如果不担心这个具体问题，多花几分钟时间会很好。

无论如何，您认为对所有元素应用 box-sizing:border-box; 是一个好的策略还是我应该只对真正需要它的元素继续这样做？

Answer 1

我认为这是个好主意。事实上，我将开始在我的网站上做同样的事情。

这里 Paul 谈到了以同样的方式使用它

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.

我发现这有助于解决 IE7 中的问题

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