企业IE11迁移指南:详解浏览器模式、文档模式、User-Agent和X-UA-Compatible

2015年11月04日

浏览器模式决定了 Internet Explorer 发出请求时自带的 User-Agent,也决定了在默认情况下 Internet Explorer 使用哪一种文档模式来渲染页面。这篇文章就来梳理一下它们的关系。

浏览器模式

在不同的浏览器模式下,Internet Explorer 发出请求时所带的 User-Agent 字符串是不同的。Internet Explorer 8, 9, 10 有两种浏览模式:默认模式以及兼容性视图模式。IE11 除了这两种模式外,还有企业模式

浏览器模式

默认模式

在默认模式下,Internet Explorer 8, 9, 10 的 User-Agent 字符串均以 “MSIE+版本号” 的格式来声明当前浏览器及版本。

IE11为了避免被识别为旧版本IE,移除了 “MSIE” 特征字符串,改以 “rv:11.0” 来声明当前版本,并添加 “like Gecko” 以便与其他浏览器保持一致。

IE版本 User-Agent
Internet Explorer 8 Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Internet Explorer 9 Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
Internet Explorer 10 Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Trident/6.0)
Internet Explorer 11 Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

操作系统版本不同会导致 User-Agent 字符串有略微的差异。

兼容性视图模式

在兼容性视图中,User-Agent 会包含 “MSIE 7.0” ,并含有当前 IE 对应的排版引擎版本(Trident)。所以如果在 Internet Explorer 8, 9, 10 中发现 User-Agent 含有 “MSIE 7.0”,那就说明当前页面是运行在兼容性视图中。IE11 的兼容视图也会包含 “MSIE 7.0” 的 User-Agent 字符串,但是 IE11 还可以通过企业模式来使 User-Agent 字符串含有 “MSIE 7.0”。

IE版本 User-Agent
Internet Explorer 8 兼容性视图 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Internet Explorer 9 兼容性视图 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Internet Explorer 10 兼容性视图 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)
Internet Explorer 11 兼容性视图 Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0)

操作系统版本不同会导致 User-Agent 字符串有略微的差异。

文档模式

文档模式决定了浏览器如何渲染页面。为了向下兼容,每个 IE 版本均支持当前 IE 版本之前所有的文档模式。不同的文档模式代表了 IE 在不同时期所支持的标准和特性。比如 CSS3 属性 opacity 只在 IE9 标准文档模式及以上才支持;ECAMScript 6 中 let 关键字只在最新的 IE11 标准文档模式下才支持。Internet Explorer 通过一系列复杂的判定标准来决定使用哪一种文档模式。不同的浏览器模式会影响 IE 选择文档模式的默认行为。

Internet Explorer 7, 8, 9 默认模式

Internet Explorer 7, 8, 9 会检测当前页面是否包含 <!DOCTYPE> 声明,如果有那就会用当前 IE 所支持最高的文档模式,如果没有,IE 则会使用 IE5 Quirks 文档模式。

Internet Explorer 10, 11 默认模式

Internet Explorer 10 和 Internet Explorer 11 不管当前页面是否包含 <!DOCTYPE> 声明,都会使用最高的文档模式,即:IE10 使用 IE0 标准文档模式,IE11 使用 IE11 标准文档模式。

兼容性视图模式

兼容性视图会模拟 IE7 的文档模式选择行为,即:如果页面有声明 <!DOCTYPE> 就使用 IE7 标准文档模式,如果没有则使用 IE5 Quirks 文档模式。

X-UA-Compatible

上一节描述的只是不同浏览器模式下选择文档模式的默认行为,如果页面中含有 X-UA-Compatible 的 meta 标签或者 http 返回头,那么文档模式的选择会截然不同。X-UA-Compatible 常常用于强制指定某个特定的文档模式或浏览器模式,这样就把文档模式的控制权完全交给了开发人员。

如何使用 X-UA-Compatible?

X-UA-Compatible 可以以下两种形式插入当前页面。

  1. 以 meta 标签形式插入到网页 head 标签内,需要确保这个 meta 标签出现在其他元素之前(除了 title 和其他 meta 标签) ,如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    ...
    </head>
    <body></body>
    </html>
    
  2. 以 HTTP 返回头的形式返回,如:

    HTTP 头名:X-UA-Compatible

    HTTP 头值:IE=Edge

可取值及含义

下表列出了 X-UA-Compatible 可取的值及其作用。

作用
IE=5 使用 IE5 Quirks 文档模式
IE=EmulateIE7 使用 IE7 浏览器模式来决定文档模式
有 <!DOCTYPE>,使用 IE7 标准文档模式,否则使用 IE5 Quirks 文档模式
IE=7 使用 IE7 标准文档模式
IE=EmulateIE8 使用 IE8 浏览器模式来决定文档模式
有 <!DOCTYPE>,使用 IE8 标准文档模式,否则使用 IE5 Quirks 文档模式
IE=8 使用 IE8 标准文档模式
IE=EmulateIE9 使用 IE9 浏览器模式来决定文档模式
有 <!DOCTYPE>,使用 IE9 标准文档模式,否则使用 IE5 Quirks 文档模式
IE=9 使用 IE9 标准文档模式
IE=EmulateIE10 使用 IE10 标准文档模式
IE=10 使用 IE10 标准文档模式
IE=EmulateIE11 使用 IE11 标准文档模式
IE=11 使用 IE11 标准文档模式
IE=edge 使用当前浏览器所支持的最高文档模式
IE8: IE8 标准文档模式
IE9: IE9 标准文档模式
IE10: IE10 标准文档模式
IE11: IE11 标准文档模式

优先级

X-UA-Compatible 的优先级高于默认模式和兼容性视图模式,低于以下两种情形。

  1. F12 指定的文档模式优先级最高
  2. IE11 中的企业模式

如果同时设置了 X-UA-Compatible meta 标签和 HTTP 返回头,IE 会采纳 meta 标签中指定的值。

使用场景

X-UA-Compatible 需要通过修改网站代码或调整服务器设置来添加,因为网站开发人员往往比 IT 管理员更了解网站该使用哪一种文档模式,所以这样就可以让开发人员来指定网站运行在某一个特定的浏览器模式或者文档模式下,下面是一些常见的使用场景。

  1. 一个新开发的内部应用需要用 IE9 标准文档模式或以上来支持某些 CSS3、HTML5 特性,然而由于内部网站常常会被IE自动检测为本地 Intranet 站点,而本地 Intranet 站点会默认运行在兼容性视图模式下,最终导致 IE 使用 IE5 Quirks 文档模式或 IE7 标准文档模式来渲染网页。这种情况下开发人员可以通过添加 X-UA-Compatible 来强制使用较新的文档模式以解决该问题。

  2. 开发人员最近对一个运行多年的内部站点添加了一些新页面来实现新的业务功能,新的页面需要使用最新的文档模式来支持 HTML5 特性,然而该站点下其他页面却只能运行在兼容性视图模式(IE5 Quirks 文档模式)下。这种情况下,开发人员可以单独针对那几个新页面添加 X-UA-Compatible 来指定一个较新的文档模式。

如何检测当前文档模式?

  1. 打开 F12 开发者工具查看右上角显示的文档模式。

    IE10 F12开发者工具

    IE11 F12开发者工具

  2. 在 F12 开发者工具的控制台中运行脚本:document.documentMode

    F12控制台

  3. 在地址栏中运行:javascript:alert(document.documentMode)

    从地址栏弹出文档模式值

如何查看 IE 发出的 User-Agent?

  1. 打开 F12 开发者工具,点击网络选项卡,按F5或点击开始按钮来抓取 HTTP 日志,地址栏输入你要访问的页面,双击第一条记录查看详细信息,在请求标头中可以查看到 IE 发出的 User-Agent。

    从F12网络日志中查看IE发出的User-Agent

  2. 使用第三方HTTP日志工具,如:HTTPWatch、Fiddler。

参考资料