Border-Box与IE6

发表于 分类于

上周给 hipark 做了IE6下的兼容，兼容十多年前的浏览器，各种蛋疼

因为之前项目是基于border-box盒模型，这里稍微总结下border-box相关的事儿

一、盒模型和IE的怪异模式

先看下W3C的盒模型和IE盒模型的差异：

Long long ago，只有很少HTML元素既支持border也支持padding，而当时的两大主要浏览器，Netscape 4.0和IE 4.0所定义的width都是包含padding和border，这就是所谓的IE盒模型

而后来根据W3C于1996年发行的CSS1所指定的，当任意一个块级元素的宽度或高度被显式指定，它应当只确定这个可见元素自身的宽度或高度，而padding, border和margin随后被应用，也就是说W3C规定的width并不包括padding和border，这就是著名的W3C盒模型

那么我们就明白了，新标准出现后，为了兼容旧版浏览器，IE保留了旧的盒模型，这也就是后来IE的怪异模式(quirk mode)，而新版的IE（6以上）遵从了W3C的标准，采取了W3C盒模型，只会在某些特殊环境下触发quirk mode

二、怪异模式的触发条件

一般来说，DOCTYPE 缺失或者语法不正确都会触发IE的怪异模式，只是这都是我们极力避免的

值得一提的是在IE6中，如果 DOCTYPE 之前有一个 XML 声明，不管是否指定完整的 DOCTYPE，它就会以 quirks 模式渲染页面：

1
<?xml version="1.0" encoding="utf-8"?>

另外，DOCTYPE 之前有任何语句，quirks 模式在任何版本的 IE 中（截至 IE 9）同样会被触发：

1
<!-- This comment will put IE 6, 7, 8, and 9 in quirks mode -->

三、box-sizing

box-sizing是CSS3中的新增属性，一般了解box-sizing的同学都知道，border-box实际上就是IE 的 怪异模式（或者叫兼容模式，大概只有IE自己会这么叫）。其实现在看来，IE在当初还是很有远见的，border-box确实比content-box更加合理，不然W3C也不会给开发者们多一种选择。比如给input的width100%，再设定padding为20px的时候，可以避免很多无意义的嵌套

box-sizing在兼容性方面其实表现也不错，Firefox2.0开始，Chrome4.0开始就支持，而我们最头疼的IE居然也在8就开始支持了，所以现在项目里基本都是采用box-sizing布局，而在IE下只需要在 DOCTYPE 之前添加一句注释，使其触发怪异模式

四、怪异模式下margin失效

一般来说我们使块级元素居中都只需要为其添加 margin:0 auto; 即可，可是有时在IE6的怪异模式下无效，解决方案居然是 text-align: center; 这是得有多奇葩呢