*{Box-sizing:border-box; }:要边框框还是不边框框所有元素？

Question

我将开始开发一个新网站,我正准备处理浏览器用于计算元素宽度和高度的不同方法(盒子模型的东西).不知怎的,我想到了:如果我只是申请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

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

保罗谈到以同样的方式使用它

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

我们一直在我的一个项目中使用*{box-sizing:border-box;}(在生产中部署,平均每月访问量超过1个月),在工作上大约一年了,它似乎很好.该项目已经在IE8和9以及最新的Firefox和Chrome版本中进行了测试,我们没有遇到任何问题.所有jQuery(+ UI)偏移计算和动画都运行良好,即使在我们显示为内联块的任何元素中也是如此.最近我们开始在移动设备(iPhone,iPad和Android)上测试这个项目,我们还没有任何关于盒子大小的问题,所以它似乎工作得很好.

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

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