JS魔法堂:浏览器模式和文档模式怎么玩?

一、前言                                      

  从IE8开始引入了文档兼容模式的概念,作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”(IE11开始改为“浏览器模式”改成更贴切的“用户代理字符串”)品味一番,它的出现极大地方便了苦逼的前端攻城狮们适配各版本的IE,但jser们也不能完全信任它,因为它只是提供尽可能的文档模式模拟而已。

  本篇大部分内容来源于官方解说:http://msdn.microsoft.com/library/cc288325(v=vs.85).aspx,并尽量融入个人平常工作中踩过的坑加以阐述。

  注意:本文内容仅针对HTTP头Content-Type字段为text/html的html文档作说明,而XML文档不在本文的讨论范围之内。

二、什么是浏览器模式?                               

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

   它唯一需要注意的是,在不同的IE版本中,它与文档模式的关系可不相同。

   IE89中,倘若浏览器模式被设置为Internet Explorer7,那么文档模式的只能设置为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。

  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模式,而且设置的方式也丰富得多。

四、文档模式的种类                               

  1. 怪异模式

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

  2. 标准模式(非怪异模式)

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

  3. 准标准模式(有限怪异模式)

    由于该模式离W3C标准仍然有一段距离,因此被称作准标准模式(或有限怪异模式)。IE6、7的标准模式实际上就是准标准模式,而IE8+才有实质上的标准模式。但到底两者的不同点体验在哪里,本人暂时不了解,请各位指导!

五、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的方式。

六、<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是一样的;

     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。

七、对<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>

八、不一样的标准模式                                

  虽然说IE6、7、8、9、10、11均有标准模式,但由于W3C标准规范内容随时间的增改,而且浏览器对标准的实现是阶段性的,因此个版本的标准模式不尽相同。

九、不一样的怪异模式                                

  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也会自动水平居中。

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

  1. 布局

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

  2. 解析

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

  3. 脚本

  这个我想不用多说大家也深有体验了。

十一、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的效果相近。

十二、总结                                      

  从“浏览器模式”与“文档模式”关联,“文档模式”与“盒子模型的渲染模式”挂钩,到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,而渲染模式影响各项样式值和获取方式等等,情况会复杂得多。因此综合文档模式判断、特征嗅探、渲染模式判断是必须的,上述内容只是挖坑而已。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

如何用Chrome自带的截屏功能截取超过一个屏幕的网页

前端开发人员经常需要将当前的网页截图发给产品经理讨论。如果网页很长,一个屏幕显示不下,那么操作系统自带的截图功能就没有办法截取整个屏幕了。

8771
来自专栏互联网数据官iCDO

Google代码管理工具101 部分5-表单

主编前言: 很多朋友都听说过Tag Management(监测代码管理),但其强大的功能和实现方式,了解的朋友不多。本系列以Google Tag Manager...

3895
来自专栏小文博客

SSTap-享受游戏! ——SSTap下载地址及使用教程(内附免费版配置)

18.2K2
来自专栏Youngxj

emlog每日一键打卡(踩/赞三合一)插件1.2

2455
来自专栏CSDN技术头条

【问底】Yao Yu谈Twitter的百TB级Redis缓存实践

【编者按】文章内容是HighScalability创始人Todd Hoff基于Twitter工程师Yao Yu “Scaling Redis at Twitte...

2077
来自专栏SEO

SEOer必学网站分析神器(二)

昨晚发布“SEOer必学网站分析神器(全新解析一)”后,突然发现,里面少讲了一点内容,在这里给大家补上。 移动适配:除了上次讲的一些内容外,还是可以加快移动端...

3496
来自专栏美团技术团队

美团点评境外度假团队前端项目开发实践总结

前言 随着前端项目数量和规模越来越大,参与的人员也越来越多,如何在前端项目开发过程中保证优质的开发者体验和项目的可维护性,同时确保极致的用户体验将会是一个非常大...

4638
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

教你轻松在React Native中集成统计的功能

有时我们需要知道一款产品上线后的受欢迎程度,推广效果、有多少人安装、使用率,平均在线时长、活跃用户、启动次数、版本分布等数据,这个时候我们不得不用到统计分析。如...

4624
来自专栏理论坞

如何解决MAC软件出现程序已损坏的提示

一般情况下mac软件以dmg,akp和app后缀结尾,dmg只是类似ISO一样的光盘镜像,akp是安装程序,app是类似windows里可直接应用的绿色软件。这...

992
来自专栏小白课代表

格式工厂 | 文件格式转换神器!

http://www.pcfreetime.com/formatfactory/CN/index.html

2563

扫码关注云+社区

领取腾讯云代金券