IE浏览器兼容性模式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了IE浏览器兼容性模式相关的知识，希望对你有一定的参考价值。
最近支持公司的一个内部业务管理系统，系统是基于jQuery来实现；用了2年的MVVM框架的我转向这个完全使用jQuery框架来开发的系统，真是相当不爽（相信用过MVVM框架的跟我是相同的感受）；更为憋屈的是，到了这个年代，IE的亲爹微软都放弃支持IE6-10了，系统尽然还只支持使用IE浏览器（运营电脑安装都是IE8浏览器，所以大部分只管IE8），其他高级浏览器不被支持（当然这是由于系统使用了基于IE的一些插件导致）。
但是话又说回来，但是在支持系统的开发过程中，经常看到X-UA-Compatible的meta配置值，甚是不解，这也暴漏了自己在有关浏览器兼容性视图方面知识的缺陷。为此通过查阅资料对IE文档兼容性模式有了一定的理解，虽然这些东西会逐渐的退出历史舞台。
1、浏览器兼容性简介
历史由来
在W3C标准推出之前的浏览器大战时代，微软的IE浏览器系列和网景浏览器之间各自为政，他们的页面是两套完全不同的实现方式，网页要兼容必须要实现两套代码；对于开发者来说，这是比较痛苦的，也不利于标准化和普及。为此W3C制定了一套标准规范，虽然初期这两个公司未必执行这些标准，毕竟人家有大量的市场占有率，一个小小的机构组织能奈我何；但是为日后的标准化制定了一套规范。在W3C规范推出后，之前各自为政开发的页面在标准模式下就不能使用了；由于存在大量规范之前开发的页面还在服务中，为此，为了兼容之前老页面的使用，这才有了浏览器兼容性；
三种模式
浏览器器兼容性最早出现在IE6浏览器，是为了兼容之前页面的展示。它有IE6标准模式和IE5.5的怪异模式两种模式，其中诡异模式为了兼容之前老页面的。那么浏览器一般有几种模式呢？根据这篇文章《Activating Browser Modes with Doctype》介绍，准确的说是以下三种模式：
- 标准模式(standards mode)：按照W3C制定的标准来执行对应的html、CSS和JS行为。
- 准标准模式(almost standards mode)：大部分们是标准模式，只有一小部分表现为怪异行为。
- 怪异模式(quicks mode)： 按照网景4和IE5.5的行为来展现
浏览器虽有上述三种模式，但是需要注意的是我们谈及最多的是标准模式和诡异模式，根据Activating Browser Modes with Doctype的介绍，不同的doctype可能会导致不同的模式。还需补充一点：标准模式并不完全标准。因浏览器厂商实现标准的阶段不同，所以各个浏览器的标准模式之间也有很大的不同。
浏览器区分标准和怪异模式，那么如何区分当前文档处于何种模式呢？
使用IE为document提供的compatMode属性来判断，具体判断如下表所示。后续其他的标准浏览器也实现了该属性用于检测文档处于何种模式；
| compatMode值 | 文档模式 |
| CSS1Compat | 标准模式 |
| BackCompat | 怪异模式 |
后来从IE8开始又为document提供了documentMode属性；它不像compatMode那样概括性的得出非此即彼的结果，而是可以具体检测当前IE浏览器版本下网页具体的文档呈现模式。如IE8下有3种模式：5（怪异模式）、7（IE标准模式）、8（IE8标准模式）。但是其他标准浏览器并没有实现该属性。
另外，如果文档中没有包含DOCTYPE或者无法识别的DOCTYPE（除了下面讲到的X-UA-Compatible配置，其配置值为IE5-11会忽略DOCTYPE），那么浏览器就会进入怪异模式。
2、浏览器模式与文档模式
这两个概念是与浏览器兼容性相关的，在兼容性视图下或者在开发者工具栏下，你将看到浏览器兼容性和文档模式。例如下图是本机IE9浏览器的开发者工具下的浏览器模式和文档模式
- 浏览器模式(Browser Mode): 用于切换IE针对当前文档的默认文档模式、对浏览器不同版本的条件注释的解析、决定请求头的userAgent的值。
- 文档模式(document mode): 决定文档的排版引擎和js引擎。
在开发者工具中切换不同浏览器模式，其对应的默认文档模式为当前浏览器模式的值；如IE7-9的浏览器模式对应的文档模式分别为IE7-9标准；
另外，注意IE8-9的兼容性模式对应的默认文档模式是IE7标准。例如下面代码在浏览器模式对应的兼容性模式下均为IE7文档模式：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>test</title> 6 </head> 7 <body> 8 <!--[if IE 6 ]> 9 <span style="color:red">this is ie6</span><br /><br /> 10 <![endif]--> 11 <!--[if IE 7 ]> 12 <span style="color:red">this is ie7</span><br /><br /> 13 <![endif]--> 14 <!--[if IE 8 ]> 15 <span style="color:red">this is ie8</span><br /><br /> 16 <![endif]--> 17 <!--[if IE 9 ]> 18 <span style="color:red">this is ie9</span><br /><br /> 19 <![endif]--> 20 </body> 21 </html>
不同文档模式，其documentMode值是不同的，根据上面一节讲到的，通过documentMode能具体的获取当前浏览器的文档呈现模式；如IE9下的文档模式有：
| 文档模式 | documentMode |
| 怪异模式 | 5 |
| IE7标准 | 7 |
| IE8标准 | 8 |
| IE9标准 | 9 |
可以看到，IE8+后的浏览器版本的兼容性模式中，不会有IE6的文档模式。
3、IE浏览器的文档兼容模式
上面介绍了IE浏览器模式的切换会改变网页的默认文档模式，但是是否可以指定网页的文档模式呢，这是当然可以的，这篇文章《定义文档兼容性，让IE按指定的版本解析我们的页面》讲解的很透彻；具体地是需要用到IE8才开始支持的X-UA-Compatible的meta配置；为该X-UA-Compatible配置不同的值，网页就会按照指定的文档模式来渲染模式以及对应的JS引擎来执行，也就是说开启了IE浏览器的兼容模式。例如为网页指定以IE8的标准模式来呈现的配置如下：
<meta http-equiv="X-UA-Compatible" content="IE=8">
除了上述的X-UA-Compatible配置值，还有其他的配置值，具体的如下：
| X-UA-Compatible值 | 说明 |
|---|---|
| IE=5 | 让浏览器使用Quirks mode来显示，实际上是使用Internet Explorer 7 的 Quirks 模式来显示内容，这个模式和IE5非常相似。 |
| IE=edge | 这个设置是让IE使用当前的最高版本进行文档的解析，官方文档指明，edge模式仅适用在测试环境，不建议在生产环境中使用 |
| IE=7 | 使用标准IE7来处理 |
| IE=EmulateIE7 | 模拟IE7来处理，遵循 <!DOCTYPE> 指令，如果文档有当前有一个合法的<!DOCTYPE>，就使用IE7模式，否者使用Quirks模式（Internet Explorer 5 Quirks），对于大部分网站来说，这是首选的兼容性模式 |
| IE=8 | 标准IE8 |
| IE=EmulateIE8 | 模拟IE8，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明 |
| IE=9 | 标准IE9 |
| IE=EmulateIE9 | 模拟IE9，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明 |
| chrome=1 | 强制使用Chrome，需要IE下Chrome插件支持 |
| IE=EmulateIE10 | 模拟IE10，遵循 <!DOCTYPE> 指令，参照IE=EmulateIE7说明 |
| IE=10 | 标准IE10 |
需要注意的是，若设置的值为表格其他值，那么IE的解释是会尝试将数值转化为最接近的浏览器版本。
<meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
在客户端可以通过设置meta的X-UA-Compatible值的来变更浏览器的文档模式，服务器端同样可以变更浏览器的文档模式。服务可以在响应头response header中设置X-UA-Comptible的值为响应的值来变更当前网页的文档模式。
服务器以这种方式，同样可以指定网页的文档模式；个人感觉这个种方式相对来说比较灵活，可以根据不同的浏览器来设置对应的文档模式。
另外，IE开发者工具和IE浏览器的兼容性视图的列表配置等等均可以改变浏览器的文档模式。
4、决定IE浏览器文档模式的优先级
话说回来，既然有上一节提到的4种方式可以变更浏览器的文档模式，那么他们的优先级孰高孰低呢？这个可以参考上面提到的文章《关于浏览器模式和文本模式的困惑》里面的两幅图来说明。
IE9下的文档模式的优先级的决定顺序如下图：
IE8的文档模式优先级如下图：
从上面IE8、9的文档模式图中可以看出：
- IE8、9浏览器的兼容性模式默认均是使用IE7仿真模式作为文档模式的；
- 兼容性视图配置的信息同样默认是IE7仿真模式作为文档模式的。
所以在兼容老页面时，IE7仿真视图是首选的兼容性方式。
参考：
3、定义文档兼容性
5、Activating Browser Modes with Doctype
以上是关于IE浏览器兼容性模式的主要内容，如果未能解决你的问题，请参考以下文章