9

我将开始开发一个新网站,并准备好处理浏览器用来计算元素宽度和高度的不同方法(盒子模型的东西)。不知何故,我想到了:如果我只适用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;到所有元素是一个好策略还是我应该只对真正需要它的元素继续这样做?

4

1 回答 1

9

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

在这里,保罗谈到以同样的方式使用它

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

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

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

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

于 2012-05-23T15:36:55.357 回答