为什么「box-sizing:border-box」没有被广泛采用?

这个在布局自适应方面很有用呀。
关注者
184
被浏览
52555

15 个回答

谢邀。

最直接的原因或许是开发者不知道这个属性的存在。因为这是一个CSS3属性,且长期以来都必须用vendor前缀。

而要说更深层原因,兼容性问题或许是一个原因,并且是IE的兼容性问题。

我们知道border-box实际上就是IE quirk mode下的box model。而box-sizing属性也是为了兼容这一模型在FF 1.0中就被加入了。其他浏览器,Safari从3.0开始,Chrome从1.0开始就支持了。box-sizing绝不是像@张轩 说的“很新的玩意儿”(或许是因为他引用的文章本身可能已经有年头了),而是少数这么早就得到广泛支持的CSS3属性。

讽刺的是,问题居然还是出在IE上。IE6和7的标准模式下没有box-sizing。这意味着你的网页如果要使用box-sizing: border-box,必须使用quirk mode。而经过长期的标准教育,开发者——至少那些知道CSS3的“重构”们,对quirk mode可谓避之不及了——虾米?你写的网页还用quirk mode?太不专业了吧!

所以,这就形成了一个悖论。

对于大多数从头开始的项目,开发者不会使用quirk mode,因此若要兼容IE6、7,就不能用box-sizing。另一方面,box-sizing的出现是为了更方便的“重构”既有网页,老项目的维护本可采用这方案,但是貌似大多数专业开发者都倾向选择更激进的“重构”方案,就是完全重写。

尽管站在今天的立场回望,对于IE6、7使用quirk mode,对于其他现代浏览器使用box-sizing实际上是完全可行而且很可能是更健壮的方案(因为IE6、7的标准模式box model是以“打补丁”的方式改写的,其实比quirk模式有更多的bug),并且可以避免许多用于layout的无意义标签(因为采用标准box model的布局方案在没有其他特性如calc()的支持下往往需要额外的container)。但是真正采取这样方案的非常罕见——就我所知,无论国内外,似乎都没有开发者意见领袖强力推行这样的方案,所以社区就缺乏这个方向的探索和积累。

而到了今天,calc() 终于已经得到了广泛支持,box-sizing在避免无意义标签方面的不可替代性就随之消失了。考虑到box-sizing的一些实现上的bug(比如FF和IE在getComputedStyle得到的width/height是按照标准模式计算出来的),以及混合多种box model在开发中的理解成本(要随时记得width/height的表现取决于box-sizing的计算值——其实left/top也有类似的问题,调试的时候你得确定position的计算值),使用box-sizing的好处就不多了。

以上。
Bootstrap 从 3.0 开始就全面使用 border box,你看那么多新建的中小网站都用 Bootstrap,谁说 border box 不流行的?只要你一开始就用 Bootstrap 或像它那页把所有元素 reset 为 border box,之后根本不会有问题。
为什么?