为之漫笔

指定使用遗留的文档模式(IE)

原文链接: msdn.microsoft.com

有时候需要限制Windows Internet Explorer在解析某个网页时使用特定的文档模式。在此,我们介绍x-ua-compatible头部属性,这个属性可以让用户就像使用旧版本IE一样查看当前网页。

简介

最后更新:2013-8

正如Defining document compatibility.aspx)中所讨论的, <!DOCTYPE>.aspx)用于定义网页的文档类型,而文档类型双决定了浏览器如何把网页显示给用户。

注意 从IE11开始,文档模式将被废弃,因此不应该再使用。需要使用过去的文档模式才能正确显示的网页,应该使用现代标准定义的特性进行重写。要了解更多,请参考Compatibility changes in IE11.aspx)。

注意 到Windows 8为止,过去的文档模式只在Internet Explorer中得到支持。Windows Store应用只支持IE10标准模式。更多信息,请参考Defining document compatibility.aspx)。

我们建议网站在多数情况下使用HTML5文档类型,以支持最普适的以及即将出现的标准,乃至最多的浏览器。下面这个例子展示了如何指定HTML5文档类型。

<!DOCTYPE html>

Internet Explorer将以标准模式显示包含这种HTML5文档类型的网页,结果就是能够对HTML5、CSS3、SVG及其他既有和将来的行业标准提供最高级别的支持。

有时候,标准模式不能正确显示一些原有网页。出现这个问题的原因有很多,包括但不限于:

  • 网站的设计依赖于浏览器某个特定版本才有的特性,而该特性在浏览器后续版本中发生了变化;
  • 网站的设计依赖非标准的行为;
  • 网站的设计依赖标准或浏览器最新版本中不再支持的能力;
  • 网站的设计依赖标准早期版本定义的特性,该特性的设计在后续版本中发生了变化,或者在新版本标准中被其他特性取代了;
  • 网站的设计依赖的功能在浏览器某个早期版本中没有被正确实现。

不管什么原因导致了网站不能在标准模式下正确显示,最好还是使用最新标准中的特性更新网站。但是,使用什么技术更新则取决于是什么原因导致的网站显示不正确。更多信息,请参考Internet Explorer 9 Compatibility Cookbook.aspx)和Internet Explorer 10 Compatibility Cookbook.aspx)。

指定使用过往文档模式

接下来的例子展示了怎么使用x-ua-compatible属性指定以某个IE早期版本支持的文档模式显示网页。

&lt;html&gt;
&lt;head&gt;
  <!-- Use Internet Explorer 9 Standards mode -->
  <meta http-equiv="x-ua-compatible" content="IE=9">
  &lt;title&gt;My webpage&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p&gt;Content goes here.&lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

这里使用了meta.aspx)元素来指定X-UA-Compatible。它告诉Internet Explorer以IE9标准模式显示当前网页,实际上就是限制网页只能使用Windows Internet Explorer 9支持的特性。

X-UA-Compatible起不起作用取决于用户浏览网页时使用的浏览器版本。

  • 版本:使用JavaScript的Windows Store应用或Windows UI中的Internet Explorer
    • Windows 8.1下是IE11 EdgeHTML模式,Windows 8下是IE10标准模式
    • 这些情况下这是唯一支持的文档模式
  • 版本:桌面版本Internet Explorer或Internet Explorer 9
    • IE9标准模式
    • content属性指定了浏览器支持的文档模式
  • 版本:Internet Explorer 8
    • IE8标准模式
    • 浏览器不支持指定文档模式,因此会使用自己支持的最高级的文档模式
  • 版本:Internet Explorer 7、Internet Explorer 6或Internet Explorer 5.5 for the Mac
    • IE5(混杂)模式
    • 这几个版本的浏览器不支持X-UA-Compatible,而且网页未指定&lt;!DOCTYPE&gt;.aspx) 指令,就会进入混杂模式

与此同时,还要记住以下几点。

  • 如果网页指定了doctype指令,并且包含X-UA-Compatible,则后者的优先级高于前面的指令。
  • 如果浏览器支持X-UA-Compatible,但网页并未指定文档模式,则使用所支持的最高级的文档模式显示网页。
  • 不支持X-UA-Compatible的旧版本浏览器使用&lt;!DOCTYPE&gt;.aspx)指令决定文档模式。
  • Internet Explorer 9及更早版本以IE5(混杂)模式显示没有&lt;!DOCTYPE&gt;.aspx)指令的网页。为此,建议所有网页都指定&lt;!DOCTYPE&gt;指令,例如指定HTML5文档类型。

这种灵活性可以保证最大限度兼容市面上还有人用的各种版本的Internet Explorer。更多信息,请参考Understanding the need for document compatibility modes.aspx)。

注意 因为所有Internet Explorer版本(包括Microsoft Internet Explorer 6)都会将HTML5文档类型解释为标准模式文档类型,我们建议在不需要特别声明的所有网页中使用HTML5文档类型。这样可以保证网页被以最高级文档模式显示。

X-UA-Compatible不区分大小写,但必须出现在网页的&lt;header&gt;区(HEAD section.aspx)),且必须位于除title.aspx)及其他meta.aspx)元素之外的元素前面。

Web服务器也可以通过配置指定.aspx)X-UA-Compatible。如果Web服务器指定了它,而另一个X-UA-Compatible又在网页内容中出现,则网页中出现的X-UA-Compatible的优先级高于服务器发送的。

注意

到IE9模式为止,网页还不能以多种文档模式显示。举个例子来说,一个标准模式的网页包含一个frame.aspx)元素,其中的内容以混杂模式显示。IE9模式仍然会以标准模式显示该子框架(因为父文档是以标准模式显示的)。但从Internet Explorer 10开始,子框架也可以模拟混杂模式。更多信息,请参考IEBlog: HTML5 Quirks mode in IE10。不过为了得到最好的结果,还是建议文档模式一致。

理解遗留的文档模式

要使用X-UA-Compatible限制网页使用遗留文档模式时,请参考使用下列值。

  • 对应特定文档模式的值,比如IE9模式、IE8标准模式或IE7标准模式。此时,使用以下声明中的一个:

    • <meta http-equiv="x-ua-compatible" content="IE=9" >
    • <meta http-equiv="x-ua-compatible" content="IE=8" >
    • <meta http-equiv="x-ua-compatible" content="IE=7" >

    通过使用上述其中一个值,可能限制网页以对应Internet Explorer版本的标准模式显示。很多情况下,这也意味着限制Internet Explorer只使用相应版本支持的功能。

  • 有时候,你可能想让Internet Explorer使用文档类型声明把网页限制为特定的标准模式,同时又使用文档模式来表示一个老版本的浏览器,如Internet Explorer 5.5。

    为此,可以根据你想要的标准模式,指定下列的一个值:

    • <meta http-equiv="x-ua-compatible" content="IE=EmulateIE9" >
    • <meta http-equiv="x-ua-compatible" content="IE=EmulateIE8" >
    • <meta http-equiv="x-ua-compatible" content="IE=EmulateIE7" >

    (这样设置在你有一堆网页使用的doctype指令值不同的情况下有用。)

    这样设置之后,网页要么以你指定的版本对应的标准模式显示,要么以IE5(混杂)模式显示。

  • 使用下面的值以EdgeHTML模式显示网页,这是从Internet Explorer 6到IE11,Internet Explorer支持的最高级模式。

    • <meta http-equiv="x-ua-compatible" content="IE=edge" >

    注意,这个值与使用HTML5文档类型从功能上是等价的。它会将Internet Explorer置于其支持的最高级模式之下。对于常规维护性网站,需要经常跨浏览器测试互操作性的,Edge在多数情况下都是最有用的。

    注意 从IE11开始,EdgeHTML模式是推荐模式。(在早期版本中,它是试验性的。)更多信息,请参考Document modes are deprecated.aspx)。

    从Windows Internet Explorer 8开始,有些Web开发者使用EdgeHTML模式meta标签来隐藏地址栏中的Compatibility View按钮。但从IE11开始,就不需要为了这个目的这样做了,因为那个按钮已经从地址栏删除了。

    因为无论用户使用哪个版本的Internet Explorer,它都会强制以标准模式打开所有网页,所以你可能会在所有网页中使用EdgeHTML模式。这样并不好,因为Internet Explorer 8之后的版本才支持X-UA-Compatible

    提示 如果你想让所有支持的Internet Explorer版本以标准模式打开页面,可以像前面那样使用HTML5文档声明。

  • 从Internet Explorer 11开始,content中大于10的值会切换到EdgeHTML模式。

由于以前设计的网页依赖于特定版本的浏览器,或者使用的特性在新版本浏览器中不再被支持,所以才会有限制必须用遗留的文档模式显示网页的需求。使用遗留的文档模式显示网页只是权宜之计,最终你要使用最新的标准和做法升级那些网页。

如果要指定网页的文档模式,请慎之又慎,比如:

  • 在尽可能多的Internet Explorer版本中测试,包括新版本;
  • X-UA-Compatiblecontent值中反映你网页使用的特定IE版本,比如你在测试的版本;
  • 不要把content设置为还没有测试过的IE版本。

如果没有时间或资源做这种测试,就不要设置文档模式。换句话说,必须有特定业务需求,才应该设置文档模式。更多信息,请参考When to use legacy document modes.aspx)。

确定文档兼容模式

要确定文档兼容哪种模式,可以使用F12,并参考这里的介绍Investigating document mode issues.aspx)。

要使用JavaScript确定文档模式,可以像下面示例一样使用document.aspx)对象的documentMode.aspx)属性。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // 这是IE浏览器,引擎使用的是什么模式?
   if (document.documentMode) // IE8或更高版本
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // 除非证明不是,否则假设是混杂模式
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // 标准模式
      }
      // 没有测试IE6标准模式的原因
      // 是因为该模式被IE7标准模式取代了,而且没有模拟
   }
   // 此时的engine变量保存着文档的兼容模式
}

documentMode.aspx)属性返回一个数值,表示显示网页的文档模式。比如,如果显示页面使用的是IE8模式,则documentMode返回的值为8。

compatMode.aspx)属性是Internet Explorer 6中引入的,但Internet Explorer 8引入documentMode.aspx)属性后被删掉了。依赖compatMode的应用在Internet Explorer中必须升级为documentMode才能继续用。

指定多个content属性值

meta.aspx)元素的content.aspx)属性可以接受多个值,以便开发者更好地控制Internet Explorer显示网页的方式。可是,多个值也让测试网页变得更复杂。因此,使用多个值的情况并不多见,一般只用在特殊情况下。

要为content属性指定多个值,多个值之间用逗号分隔。

如果某个Windows Internet Explorer支持指定的多个文档模式,那它就会使用最高级的文档模式。虽然并不建议,但你可以使用这种方式排除特定的兼容模式。比如,这个meta标签排除IE8:

<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >

注意 前面这个例子只为示范,请不要在产品环境中使用。

浏览器会从左到右读取content.aspx)属性的值,Internet Explorer使用其中支持的最大值。如果浏览器不支持指定的最高版本的兼容模式,则使用浏览器支持的最高版本的兼容模式。假设用Internet Explorer 8打开前面的示例页面,它就会用IE7模式显示页面。更好的IE版本使用&lt;!DOCTYPE&gt;.aspx)指令(如果网页开头儿有)决定如何显示网页。

小结

一般来说,最大众化的网站要声明HTML5文档类型,以便用反映浏览器对业界最新标准支持程度的标准模式显示。为此,网页的第一行就应该是:

<!DOCTYPE html>

假如由于某些业务上的原因,你要限制浏览器用遗留的文档模式显示网页,可以通过X-UA-Compatible来做。

最后,要确定当前文档的兼容模式,可以使用F12document.documentMode.aspx)属性。