IE对文档的解析模式及兼容性问题

深入研究这个问题源于最近制作的几个页面，交给前端后，发现在IE8下，对于JS动态控制的内容，页面高度不能够随着动态的调整。

仔细检查后发现问题在于 display:inline-block 这个属性。

inline-block 这个属性确实帮我们解决了不少问题，但是IE8在动态内容的渲染支持上，还是会有奇怪的问题。

最后的解决方法是使用 x-ua-compatible ，来强制IE8使用IE7的模式来解析页面。下面是整理的一些相关的资料。

IE的文档模式

Document Compatibility 决定了IE如何渲染你的页面，IE支持不同的 document (compatibility) mode。IE6之后的所有IE浏览器都支持以下几种模式：

Standards mode：就是每个浏览器版本所提供的最新的功能，也是默认的模式；

Quirks mode：这个模式强调兼容性超过标准（影响可以看这里）

Almost-standards mode：这个模式支持最新标准的API，但是界面渲染还是遵循旧版本的标准。

如果一个页面包含了 <!DOCTYPE> 标签，那么IE浏览器会按照标准模式进行解析。如果一个不包含 <!DOCTYPE> 的页面，IE浏览器使用 Quirks mode 来进行解析，这种情况下可能会有奇怪的事情发生。

大多数时候，我们都使用标准的模式来指定文档模式。这样能够确保适应尽可能多的标准。

<!DOCTYPE html>

有些时候，我们需要指定一些高版本的浏览器使用低版本的文档模式解析页面，这时我们可以使用 x-ua-compatible 头标签来实现。例如：

<html>

<head>

</head>

<body>

<p>Content goes here.</p>

</body>

</html>

上面这段代码，在不同的浏览器版本中，有不同的表现，如下表：

浏览器版本	结果	描述
Windows Store app或Windows UI中的浏览器	IE 10 标准模式	这是Windows Store app和Windows UI中唯一支持的模式
Internet Explorer for the Desktop 或者 Internet Explorer 9	IE9 标准模式	这正是x-ua-compatible指定的模式，而且浏览器支持这种模式
Internet Explorer 8	IE8 标准模式	因为浏览器不支持IE9标准模式，所以使用浏览器支持的最高标准模式
Internet Explorer 7, Internet Explorer 6 或者 Internet Explorer 5.5 for mac	IE5 (Quirks)模式	这些浏览器不支持这个标签头，并且网页中也没有指定<!DOCTYPE>

记住以下几个规则：

注意：所有版本的浏览器在解析 <!DOCTYPE html> 时，都会使用各自版本所支持的最高的标准模式来解析，所以推荐都是用HTML5的标记方式。IE9中，包含框架Frameset的页面，子页面的模式和父页面一致。但是在IE10中，可以分别指定。

用法：

x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

1、使用一行代码来指定浏览器使用特定的文档模式。

2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式：

使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。

3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。

4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。

参考资料：