脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS魔法堂：浏览器模式和文档模式怎么玩？，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 一、前言
从IE8开始引入了文档兼容模式的概念，作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”（IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”）品味一番，它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE，但jser们也不能完全信任它，因为它只是提供尽可能的文档模式模拟而已。
二、什么是浏览器模式？
初看“浏览器模式”确实不明白啥意思，也许IE的工程师们也了解这词的蹩脚，于是IE11索性就改名为“用户代理字符串”。现在大伙应该清楚这货就是用来设置navigator.userAgent和navigator.appversion的。
它唯一需要注意的是，在不同的IE版本中，它与文档模式的关系可不相同。
IE89中，倘若浏览器模式被设置为internet Explorer7，那么文档模式的只能设置为7,6,5；
IE11中，用户代理字符串设置和文档模式可谓是没有半毛钱关系。
三、什么是文档模式？
对于以webkit、Molliza等作为内核的浏览器来说，DOM树的解析、渲染，JS的API等主要与内核版本挂钩；而对于IE浏览器而言，这些从IE6开始就跟文档模式挂钩了。为了更好的理解文档模式，我们以时间为线从IE5开始学习吧！
3.1. 从“久远”的IE5说起
现在虽然没什么用使用IE5了，但它却从未离开过我们，因为IE5一直以怪异模式（Quirks，IE5的文档模式）的形式存活在我们的身边。不过在那个只有IE5的年代，并没有Quirks这一说法，只是后来IE6面世后逐渐向W3C标准靠拢，而IE5下DOM树的解析、渲染等都与W3C标准有很大差别，于是命其名为Quirks。
3.2. 兼容模式——IE6的新发明
由于IE6和IE5下DOM树的解析等都有很大差异，导致那些适配IE5的老网站无法在IE6上正常显示，于是出现了一个新功能——“兼容模式”，用于解决老网站的显示问题。IE6的兼容模式就两种，怪异模式（Quirks）和IE6标准模式。（IE7也只有怪异模式和IE7标准模式）
IE6默认使用怪异模式（Quirks），仅当以<!DOCTYPE>作为文档第一行声明文档类型时，才采用IE6的标准模式，即使IE无法识别所声明的文档类型。（IE7也是这样）
注意：这时的兼容模式主要是解决显示问题，要知道那时的JS只是小配角而已。
3.3. 文档兼容性模式——IE8的新宠
“文档兼容性模式”是对“兼容模式”的扩展，就IE8而言，除了提供怪异模式（Quirks）和IE8标准模式外，还提供了IE7标准模式、模拟IE7模式，而且设置的方式也丰富得多。
四 、IE8+设置文档模式的方式
开发者常用的方式：
1. 开发者工具中的“文档模式”；
2. 通过在head标签内加入如<;meta http-equiv="X-UA-Compatible" content="IE=7">的元数据标签（该例子将文档模式设置为IE7标准模式）；
3. 通过<!DOCTYPE>的增删，在标准模式和怪异模式（Quirks）间切换；
4. 通过Web服务器配置
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. 点击地址栏的兼容性视图切换；
2. 若网页是在Intranet区域中加载，配置使用兼容性视图显示Intranet区域中的网页；
3. 配置浏览器使用兼容视图浏览所有网页；
4. 将网站加入到兼容性视图列表中。
因此我们可以明白到文档模式不是完全掌控在我们手中的，哎。。。。。。
五、<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=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 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=11、IE=EmulateIE11和IE=Edge是一样的；
2. 10及以上的文档模式，若文档第一行不是有效的<!DOCTYPE>（怎样才是有效的<!DOCTYPE>，请期待《JS魔法堂：doctype我们应该了解的基础知识》），则document.COMpatMode返回BackCompat，但document.documentMode却返回正确的文档模式；
3. 9及以下的文档模式，只要文档第一行出现<!DOCTYPE>，不管是否有效，document.compatMode均返回CSS1Compat。当文档第一行没有<!DOCTYPE>且没有指定标准模式时，document.compatMode才返回BackCompat，且document.documentMode必定返回5。
六、对<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>
复制代码
七、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的效果相近。
举个栗子：
复制代码
<html>
<head>
<style type="text/css">
width: 100px;
height: 20px;
border: solid 1px red;
margin: 0 auto;
}
</style>
</head>
<body>
<p id="target"><p>
</body>
</html>
复制代码
上面的代码在是运行在怪异模式下，在IE6789下若要p#target自动水平居中，必须加上<!DOCTYPE html>转成用标准模式渲染才行。但在IE10+、Webkit和Molliza中即使在怪异模式下p#target也会自动水平居中。
八、总结
从“浏览器模式”与“文档模式”关联，“文档模式”与“盒子模型的渲染模式”挂钩，到IE10+一下子将三者关联切断，转向W3C标准。一直觉得IE9是IE非标准与标准间的过渡带，现在就更加认定是这样了。
也许大家看到这里会更加疑惑，似乎了解上述内容会加重开发的负担（考虑的点更多了）。
其实我们只要再次明确一下“文档兼容性模式”的目的就好了，对终端用户来讲它是为了在新版IE中尽量正确地显示老网站；对开发者来讲它是为了方便调试新网站在旧版IE上的显示效果和JS的有效性。
所以作为普通开发者的我们只需做三件事：
1. 以有效的doctype作为文档的第一行，保证渲染模式为标准模式；
2. 开发前设定网站的最佳运行环境范围，就是适配到IE几到几，是否适配Webkit等；
3. 开发并为兼容性付出不懈的努力。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JS魔法堂：浏览器模式和文档模式怎么玩？全部内容，希望文章能够帮你解决javascript代码实例教程-JS魔法堂：浏览器模式和文档模式怎么玩？所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。