* { 框尺寸：边框框； } ：要边框框还是不边框框所有元素？答案

【问题标题】：* { Box-sizing: border-box; } : To border-box or not to border-box all elements?* { 框尺寸：边框框； } ：要边框框还是不边框框所有元素？
【发布时间】：2016-01-13 20:19:08
【问题描述】：

我将开始开发一个新网站，并准备好处理浏览器用来计算元素宽度和高度的不同方法 (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; 应用于所有元素是一个好策略，还是应该只对实际需要它的元素继续这样做？

【问题讨论】：

我也是border-box的一员。您可能也想阅读此内容paulirish.com/2012/box-sizing-border-box-ftw

标签： css margin padding border-box

【解决方案1】：

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

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

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

我们一直在我的一个项目中使用 *{box-sizing:border-box;} （在生产中部署，平均每月访问量超过 100 万次）在工作中大约一年了，它似乎保持得很好。这项目已在 IE8 & 9 和最新的 Firefox 和 Chrome 中测试版本，我们没有问题。所有 jQuery (+UI) 偏移量计算和动画运行良好，即使在我们拥有的任何元素中显示为内联块。最近我们开始测试在移动设备（iPhone、iPad 和 Android）上进行项目，我们还没有关于 box-sizing 的问题还有任何一个，所以它似乎有效很好。

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

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

【讨论】：