浏览器模式和文档模式怎么玩_第1页
浏览器模式和文档模式怎么玩_第2页
浏览器模式和文档模式怎么玩_第3页
浏览器模式和文档模式怎么玩_第4页
浏览器模式和文档模式怎么玩_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

、前言从IE8开始引入了文档兼容模式的概念，作为开发人员的我们可以在开发人员工具中通过''浏览器模式〃和''文档模式〃（IE11开始改为''浏览器模式〃改成更贴切的''用户代理字符串〃）品味一番，它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE，但jser们也不能完全信任它，因为它只是提供尽可能的文档模式模拟而已。本篇大部分内容来源于官方解说：/library/cc288325（v=vs.85）.aspx，并尽量融入个人平常工作中踩过的坑加以阐述。注意：本文内容仅针对HTTP头Content-Type字段为text/html的html文档作说明，而XML文档不在本文的讨论范围之内。二、什么是浏览器模式？初看''浏览器模式〃确实不明白啥意思，也许IE的工程师们也了解这词的蹩脚，于是IE11索性就改名为''用户代理字符串〃。现在大伙应该清楚这货就是用来设置navigator.userAgent和navigator.appVersion的。它唯一需要注意的是，在不同的IE版本中，它与文档模式的关系可不相同。IE89中，倘若浏览器模式被设置为InternetExplorer?，那么文档模式的只能设置为7,6,5；IE11中，用户代理字符串设置和文档模式可谓是没有半毛钱关系。三、什么是文档模式？对于以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。

兼容模式一一IE6的新发明由于IE6和IE5.5下DOM树的解析等都有很大差异，导致那些适配IE5.5的老网站无法在IE6上正常显示，于是出现了一个新功能一一''兼容模式〃，用于解决老网站的显示问题。IE6的兼容模式就两种，怪异模式（Quirks）和IE6标准模式。（IE7也只有怪异模式和IE7标准模式）IE6默认使用怪异模式（Quirks），仅当以＜!DOCTYPE＞作为文档第一行声明文档类型时，才采用IE6的标准模式，即使IE无法识别所声明的文档类型。（IE7也是这样）注意：这时的兼容模式主要是解决显示问题，要知道那时的JS只是小配角而已。文档兼容性模式一一IE8的新宠''文档兼容性模式〃是对''兼容模式〃的扩展，就IE8而言，除了提供怪异模式（Quirks）和IE8标准模式外，还提供了IE7标准模式、模拟IE7模式，而且设置的方式也丰富得多。四、文档模式的种类怪异模式IE6789的是IE5.5的文档模式，IE10+和Chrome等浏览器是W3C规范的怪异模式。标准模式（非怪异模式）W3C标准的文档模式，但各浏览器的实现阶段不尽相同。准标准模式（有限怪异模式）由于该模式离W3C标准仍然有一段距离，因此被称作准标准模式（或有限怪异模式）。IE6、7的标准模式实际上就是准标准模式，而IE8+才有实质上的标准模式。但到底两者的不同点体验在哪里，本人暂时不了解，请各位指导！五、IE8+1五、IE8+1设置文档模式:的方式开发者常用的方式：1.开发者工具中的''文档模式〃；2.通过在head标签内加入如＜metahttp-equiv="X-UA-Compatible”content="IE=7"＞的元数据标签（该例子将文档模式设置为IE7标准模式）；3.通过＜!DOCTYPE＞的增删，在标准模式和怪异模式（Quirks）间切换;4.通过Web服务器配置IIS的web.config配置信息:<?xmlversion="1.0"encoding="utf-8”?><configuration><system.webServer><httpProtocol><customHeaders><clear/><addname="X-UA-Compatible"value="IE=EmulateIE7/></customHeaders></httpProtocol></system.webServer></configuration>用户常用的方式：点击地址栏的兼容性视图切换按钮（仅当HTTP、HTTPS协议时才出现该按钮）；若网页是在Intranet区域中加载，配置使用兼容性视图显示Intranet区域中的网页;配置浏览器使用兼容视图浏览所有网页；将网站加入到兼容性视图名单中；内网管理员将该网站加入到兼容性视图浏览名单中；微软的方式：1.IE会定期向微软官网拉数据，假如某网站被列入微软的兼容性视图浏览名单中，那么就会IE就会以兼容性视图模式来处理该网站。因此我们可以明白到文档模式不是完全掌控在我们手中的，哎。。。。。。六、＜metahttp-equiv="X-UA-Compatible"＞与＜!DOCTYPE＞结伴影响文档模式所有IE浏览器在默认情况下（＜metahttp-equiv="X-UA-Compatible"＞与＜!DOCTYPE＞均没有），是采用怪异模式（Quirks）；当有＜!DOCTYPE＞时，均采用浏览器版本对应的标准模式（如IE8就采用IE8标准模式，IE11就采用IE11标准模式）。现在要注意的是，当出现＜metahttp-equiv="X-UA-Compatible"＞时，文档模式将会如何呢？我们首先了解一下IE11下它的content属性值范围吧，具体范围如下：IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、IE=11、IE=EdgeIE=5：表示采用怪异模式；IE=7等纯数字的值：表示采用对应IE版本的标准模式，即使不是以＜!DOCTYPE＞作为文档第一行，文档模式依旧使用标准模式；IE=EmulateIE7等含EmulateIE字符串的值：表示采用模拟对应IE版本的模式，就是以＜!DOCTYPE＞作为文档第一行则采用标准模式，否则采用怪异模式。IE=Edge：表示采用浏览器自身版本的文档模式，如IE11，以＜!DOCTYPEhtml＞作为文档第一行则采用IE11标准模式，否则采用怪异模式。注意：在IE11中，IE=10和IE=EmulateIE10是一样的，IE=11、IE=EmulateIE11和IE=Edge是一样的；10及以上的文档模式，若文档第一行不是有效的＜!DOCTYPE＞（怎样才是有效的＜!DOCTYPE＞，请期待《JS魔法堂：doctype我们应该了解的基础知识》），则patMode返回BackCompat，但document.documentMode却返回正确的文档模式；9及以下的文档模式，只要文档第一行出现＜!DOCTYPE＞，不管是否有效，patMode均返回CSS1Compat。当文档第一行没有＜!DOCTYPE＞且没有指定标准模式时，patMode才返回BackCompat，且document.documentMode必定返回5。

七、对<metahttp-equiv="X-UA-Compatible"> 了解多点有效位置必须放在head标签内才有效。多个标签时只认第一个<html><head><metahttp-equiv=<html><head><metahttp-equiv=<metahttp-equiv=content=〃IE=EmulateIE7〃</head><body></body><scripttype=〃X-UA-Compatible〃〃X-UA-Compatible〃>content=〃IE=7〃>〃text/javascript〃>//输出7//输出7</script></html>无效content值，就设置为最接近的文档模式IE=a:文档模式为5IE=7.5:文档模式7一个标签设置多个文档模式，浏览器会自动选择可用的最高的文档模式<html><head><metahttp-equiv= "X-UA-Compatiblecontent=〃IE=7;IE=9;IE=8〃 ></head><body></body><scripttype="text/javascript">console.log(document.documentMode);//IE11中，输出9</script></html>八、不一样的标准模式虽然说IE6、7、8、9、10、11均有标准模式，但由于W3C标准规范内容随时间的增改，而且浏览器对标准的实现是阶段性的，因此个版本的标准模式不尽相同。九、不一样的怪异模式IE6789的怪异模式其实就是IE5.5的文档模式，但从IE10开始它的遵守了W3C规范的怪异模式。所以大家不要被名字而蒙骗咯！举个栗子：<html><head><styletype="text/css">#target{width:100px;height:20px;border:solid1pxred;margin:0auto;}</style></head><body><divid="target"><div></body></html>上面的代码在是运行在怪异模式下，在IE6789下若要div#target自动水平居中，必须加上＜!DOCTYPEhtml＞转成用标准模式渲染才行。但在IE10+、Webkit和Molliza中即使在怪异模式下div#target也会自动水平居中。十、文档模式影响到哪些方面布局表格、单元格的样式等都受到文档模式的影响，尤其是盒子模型。解析css和html的解析也会受到文档模式的影响，就像在IE678标准模式时，HTML解析时会将嵌套form下的子节点挪到上一节；而IE9标准模式时不会。脚本这个我想不用多说大家也深有体验了。十一、Jser别太开心初次发现IE8+提供文档兼容性模式时真的欣喜若狂，终于不用找机器来IE678逐个测试了，终于不用那个经常挂死的IETester了。但后来才发现文档兼容性模式仅仅是方便我们开发调试而已，并不能完全替代IETester，更不能替代在真实的IE67上测试。因为除了浏览器版本对应的文档模式外，其他文档模式均是跑在浏览器内核虚拟机上，而这些虚拟机仅仅能模拟真实浏览器内核的大部分DOM树解析、渲染和JSAPI而已。例如在IE8上设定文档模式为怪异模式，但XMLHttpRequest依旧可用（XMLHttpRequest是从IE7开始才有的），因此在检测浏览器特性的时候，特征嗅探比判断浏览器的文档模式更为准确、好用。另外，从第六大点的注意事项中我们可以看到，从IE10开始IE要脱离IE56789的风格，真正靠近W3C标准。没有有效的doctype时盒子模型的渲染模式就是怪异模式，否则就使用标准模式；盒子模型的渲染模式和文档模式分离，也就是渲染模式为怪异模式时，文档模式不是5。这样Jser还是使用IE10+的JSAPI，不用忍受IE5之苦；虽然在patMode为BackCompat时，渲染模式都叫怪异模式，但IE56789的怪异模式和IE10+的怪异模式所显示的效果和通过JS获取的样式数据都不同，IE10+的与Webkit、Molliza的效果相近。从''浏览器模式〃与''文档模式〃关联，''文档模式〃与''盒子模型的渲染模式〃挂钩，到IE10+一下子将三者关联切断，转向W3C标准。一直觉得IE9是IE非标准与标准间的过渡带，现在就更加认定是这样了。也许大家看到这里会更加疑惑，似乎了解上述内容会加重开发的负担（考虑的点更多了）。其实我们只要再次明确一下''文档兼容性模式〃的目的就好了，对终端用户来讲它是为了在新版IE中尽量正确地显示老网站；对开发者来讲它是为了方便调试新网站在旧版IE上的显示效果和JS的有效性，极端情况下会通过锁定文档模式来启用旧技术（如ie67下的vml）。所以作为普通开发者的我们只需做三件事：以有效的doctype作为文档的第一行，保证渲染模式为标准模式；开

人人文库> 全部分类> 图纸下载 > 毕业设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论