JS魔法堂：浏览器模式和文档模式怎么玩？

时间 2020-08-11

原文原文链接

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　javascript

从IE8开始引入了文档兼容模式的概念，做为开发人员的咱们能够在开发人员工具中经过“浏览器模式”和“文档模式”（IE11开始改成“浏览器模式”改为更贴切的“用户代理字符串”）品味一番，它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE，但jser们也不能彻底信任它，由于它只是提供尽量的文档模式模拟而已。css

本篇大部份内容来源于官方解说：http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx，并尽可能融入我的日常工做中踩过的坑加以阐述。html

注意：本文内容仅针对HTTP头Content-Type字段为text/html的html文档做说明，而XML文档不在本文的讨论范围以内。前端

2、什么是浏览器模式？　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　java

初看“浏览器模式”确实不明白啥意思，也许IE的工程师们也了解这词的蹩脚，因而IE11索性就更名为“用户代理字符串”。如今大伙应该清楚这货就是用来设置navigator.userAgent和navigator.appVersion的。web

它惟一须要注意的是，在不一样的IE版本中，它与文档模式的关系可不相同。浏览器

IE89中，假若浏览器模式被设置为Internet Explorer7，那么文档模式的只能设置为7,6,5；服务器

IE11中，用户代理字符串设置和文档模式可谓是没有半毛钱关系。app

3、什么是文档模式？　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　框架

对于以Webkit、Molliza等做为内核的浏览器来讲，DOM树的解析、渲染，JS的API等主要与内核版本挂钩；而对于IE浏览器而言，这些从IE6开始就跟文档模式挂钩了。为了更好的理解文档模式，咱们以时间为线从IE5.5开始学习吧！

3.1. 从“久远”的IE5.5提及

　　如今虽然没什么用使用IE5.5了，但它却从未离开过咱们，由于IE5.5一直以怪异模式（Quirks，IE5的文档模式）的形式存活在咱们的身边。不过在那个只有IE5.5的年代，并无Quirks这一说法，只是后来IE6面世后逐渐向W3C标准靠拢，而IE5.5下DOM树的解析、渲染等都与W3C标准有很大差异，因而命其名为Quirks。

3.2. 兼容模式——IE6的新发明

　　因为IE6和IE5.5下DOM树的解析等都有很大差别，致使那些适配IE5.5的老网站没法在IE6上正常显示，因而出现了一个新功能——“兼容模式”，用于解决老网站的显示问题。IE6的兼容模式就两种，怪异模式（Quirks）和IE6标准模式。（IE7也只有怪异模式和IE7标准模式）

　IE6默认使用怪异模式（Quirks），仅当以<!DOCTYPE>做为文档第一行声明文档类型时，才采用IE6的标准模式，即便IE没法识别所声明的文档类型。（IE7也是这样）

　注意：这时的兼容模式主要是解决显示问题，要知道那时的JS只是小配角而已。

3.3. 文档兼容性模式——IE8的新宠

　　“文档兼容性模式”是对“兼容模式”的扩展，就IE8而言，除了提供怪异模式（Quirks）和IE8标准模式外，还提供了IE7标准模式、模拟IE7模式，并且设置的方式也丰富得多。

4、文档模式的种类　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　1. 怪异模式

　　　　IE6789的是IE5.5的文档模式，IE10+和Chrome等浏览器是W3C规范的怪异模式。

　　2. 标准模式（非怪异模式）

　　　　W3C标准的文档模式，但各浏览器的实现阶段不尽相同。

　　3. 准标准模式（有限怪异模式）

　　　　因为该模式离W3C标准仍然有一段距离，所以被称做准标准模式（或有限怪异模式）。IE六、7的标准模式实际上就是准标准模式，而IE8+才有实质上的标准模式。但到底二者的不一样点体验在哪里，本人暂时不了解，请各位指导！

5、IE8+设置文档模式的方式　　　　　　　　　　　　　　　　　　　　　　　　　　

开发者经常使用的方式：

　　1. 开发者工具中的“文档模式”；

　　2. 经过在head标签内加入如<meta http-equiv="X-UA-Compatible" content="IE=7">的元数据标签（该例子将文档模式设置为IE7标准模式）；

　　3. 经过<!DOCTYPE>的增删，在标准模式和怪异模式（Quirks）间切换；

　　4. 经过Web服务器配置(让http response header 带上 X-UA-Compatible: IE=edge)

IIS的web.config配置信息：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE7" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

用户经常使用的方式：

　　1. 点击地址栏的兼容性视图切换按钮（仅当HTTP、HTTPS协议时才出现该按钮）；

　　2. 若网页是在Intranet区域中加载，配置使用兼容性视图显示Intranet区域中的网页；

　　3. 配置浏览器使用兼容视图浏览全部网页；

　　4. 将网站加入到兼容性视图名单中；

　　5. 内网管理员将该网站加入到兼容性视图浏览名单中；

微软的方式：

　　1. IE会按期向微软官网拉数据，假如某网站被列入微软的兼容性视图浏览名单中，那么就会IE就会以兼容性视图模式来处理该网站。

所以咱们能够明白到文档模式不是彻底掌控在咱们手中的，哎。。。。。。

2017/03/29，因为<meta http-equiv="X-UA-Compatible" content="IE=edge">不必定很生效，由于当端口不是80时，IE默认设置是将其视为内网应用(intranet site)，并采用兼容模式来显示(display intranet site in compatibility view)。所以最好采用HTTP Response Header的方式。

6、<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>结伴影响文档模式

全部IE浏览器在默认状况下（<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>均没有），是采用怪异模式（Quirks）；当有<!DOCTYPE>时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。

如今要注意的是，当出现<meta http-equiv="X-UA-Compatible">时，文档模式将会如何呢？咱们首先了解一下IE11下它的content属性值范围吧，具体范围以下：

IE=5、IE=7、IE=EmulateIE七、IE=8、IE=EmulateIE八、IE=9、IE=十、 IE=十一、 IE=Edge

1. IE=5：表示采用怪异模式；

2. IE=7等纯数字的值：表示采用对应IE版本的标准模式，即便不是以<!DOCTYPE>做为文档第一行，文档模式依旧使用标准模式；

3. IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，就是以<!DOCTYPE>做为文档第一行则采用标准模式，不然采用怪异模式。

4. IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以<!DOCTYPE html>做为文档第一行则采用IE11标准模式，不然采用怪异模式。

注意：

1. 在IE11中，IE=10和IE=EmulateIE10是同样的，IE=十一、IE=EmulateIE11和IE=Edge是同样的；

2017/03/29，因为document compatibility mode仅在IE8/9/10生效，所以在IE11时设置<meta http-equiv="X-UA-Compatible">是无效的，只有在开发工具中设置才有效果。

若要在IE11下采用旧版本的文档模式，则要采用Enterprise Mode(https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/)

2. 10及以上的文档模式，若文档第一行不是有效的<!DOCTYPE>（怎样才是有效的<!DOCTYPE>，请期待《JS魔法堂：doctype咱们应该了解的基础知识》），则document.compatMode返回BackCompat，但document.documentMode却返回正确的文档模式；

3. 9及如下的文档模式，只要文档第一行出现<!DOCTYPE>，无论是否有效，document.compatMode均返回CSS1Compat。当文档第一行没有<!DOCTYPE>且没有指定标准模式时，document.compatMode才返回BackCompat，且document.documentMode一定返回5。

7、对<meta http-equiv="X-UA-Compatible">了解多一点　　　　　　　　　　　　

　　6.1. 有效位置

　　　　必须放在head标签内才有效。

　　6.2. 多个标签时只认第一个

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7">
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    </head>
    <body></body>
    <script type="text/javascript">
        console.log(document.documentMode); // 输出 7
    </script>
</html>

　　6.3. 无效content值，就设置为最接近的文档模式

　　　　IE=a：文档模式为5

　　 IE=7.5：文档模式7

　　6.4. 一个标签设置多个文档模式，浏览器会自动选择可用的最高的文档模式

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9;IE=8">
    </head>
    <body></body>
    <script type="text/javascript">
        console.log(document.documentMode); // IE11中，输出 9
    </script>
</html>

8、不同的标准模式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　虽说IE六、七、八、九、十、11均有标准模式，但因为W3C标准规范内容随时间的增改，并且浏览器对标准的实现是阶段性的，所以个版本的标准模式不尽相同。

9、不同的怪异模式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　IE6789的怪异模式其实就是IE5.5的文档模式，但从IE10开始它的遵照了W3C规范的怪异模式。因此你们不要被名字而蒙骗咯！

举个栗子：

<html>
  <head>
     <style type="text/css">
       #target{
           width: 100px;
           height: 20px;
           border: solid 1px red;
           margin: 0 auto; } </style> </head> <body> <div id="target"><div> </body> </html>

上面的代码在是运行在怪异模式下，在IE6789下若要div#target自动水平居中，必须加上<!DOCTYPE html>转成用标准模式渲染才行。但在IE10+、Webkit和Molliza中即便在怪异模式下div#target也会自动水平居中。

10、文档模式影响到哪些方面　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1. 布局

　　表格、单元格的样式等都受到文档模式的影响，尤为是盒子模型。

2. 解析

　　css和html的解析也会受到文档模式的影响，就像在IE678标准模式时，HTML解析时会将嵌套form下的子节点挪到上一节；而IE9标准模式时不会。

3. 脚本

　　这个我想不用多说你们也深有体验了。

11、Jser别太开心　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

初次发现IE8+提供文档兼容性模式时真的欣喜若狂，终于不用找机器来IE678逐个测试了，终于不用那个常常挂死的IETester了。但后来才发现文档兼容性模式仅仅是方便咱们开发调试而已，并不能彻底替代IETester，更不能替代在真实的IE67上测试。由于除了浏览器版本对应的文档模式外，其余文档模式均是跑在浏览器内核虚拟机上，而这些虚拟机仅仅能模拟真实浏览器内核的大部分DOM树解析、渲染和JS API而已。例如在IE8上设定文档模式为怪异模式，但XMLHttpRequest依旧可用（XMLHttpRequest是从IE7开始才有的），所以在检测浏览器特性的时候，特征嗅探比判断浏览器的文档模式更为准确、好用。

另外，从第六大点的注意事项中咱们能够看到，从IE10开始IE要脱离IE56789的风格，真正靠近W3C标准。

1. 没有有效的doctype时盒子模型的渲染模式就是怪异模式，不然就使用标准模式；

2. 盒子模型的渲染模式和文档模式分离，也就是渲染模式为怪异模式时，文档模式不是5。这样Jser仍是使用IE10+的JS API，不用忍受IE5之苦；

3. 虽然在document.compatMode为BackCompat时，渲染模式都叫怪异模式，但IE56789的怪异模式和IE10+的怪异模式所显示的效果和经过JS获取的样式数据都不一样，IE10+的与Webkit、Molliza的效果相近。

12、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

从“浏览器模式”与“文档模式”关联，“文档模式”与“盒子模型的渲染模式”挂钩，到IE10+一会儿将三者关联切断，转向W3C标准。一直以为IE9是IE非标准与标准间的过渡带，如今就更加认定是这样了。

也许你们看到这里会更加疑惑，彷佛了解上述内容会加剧开发的负担（考虑的点更多了）。

其实咱们只要再次明确一下“文档兼容性模式”的目的就行了，对终端用户来说它是为了在新版IE中尽可能正确地显示老网站；对开发者来说它是为了方便调试新网站在旧版IE上的显示效果和JS的有效性，极端状况下会经过锁定文档模式来启用旧技术（如ie67下的vml）。

因此做为普通开发者的咱们只需作三件事：

1. 以有效的doctype做为文档的第一行，保证渲染模式为标准模式；

2. 开发前设定网站的最佳运行环境范围，就是需适配的IE版本号，是否适配Webkit等；

3. 开发并使用各类hacks为兼容性付出不懈的努力。

另外我曾参与一个项目须要运用VML来画图，客户大部分使用IE678，少部分使用IE910，其余浏览器的可忽略不计，因而就能够经过锁定文档模式为模拟IE7标准模式来启用VML支持了。（官方声IE9+不支持VML，但实际上IE8已经不支持了。）

若做为库或框架开发者，因为文档模式影响大部分JS API，而渲染模式影响各项样式值和获取方式等等，状况会复杂得多。所以综合文档模式判断、特征嗅探、渲染模式判断是必须的，上述内容只是挖坑而已。

尊重原创，转载请注明转自：http://www.cnblogs.com/fsjohnhuang/p/3817418.html ^_^肥仔John