IE浏览器的兼容模式

兼容性对于网页设计师来说非常重要。虽然最好是建立一个完全不需依赖任何网页浏览器特性或功能的网站,但是有时候这是不可能实现的。而文件兼容模式能将网页限制在某个特定版本的IE中。

可以使用 X-UA-Compatible 标头来指定网页支持的IE版本,可以使用 document.documentMode 来判定网页的兼容性模式。

通过选择支持某个特定版本的IE,你可以确保你的网页在未来的浏览器版本中也能显示一致。

指定网页兼容性模式

要为网页指定兼容模式,需要在网页中使用 meta 元素放入 X-UA-Compatible http-equiv 标头。以下范例是指定网页为 IE7 兼容模式。

<html>
<head>
  <!-- Mimic Internet Explorer 7 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <title>My Web Page</title>
</head>
<body>
  <p>Content goes here.</p>
</body>
</html> 

检测网页的兼容模式

要检测网页使用IE8浏览时的文件兼容性模式,可以使用 document object 的documentMode 属性。例如在 IE8 的地址栏输入下列代码会显示当前页面的兼容模式。

javascript:alert(document.documentMode);

documentMode 属性会返回一个对应当前页面兼容模式的数值,举例来说,若网页指定为支持 IE8 模式,documentMode 便会返回值“8”。

在 IE6 中的 compatMode 属性已经被高版本的IE弃用,在 IE8+ 中被新的 documentMode 属性替代。目前使用 compatMode 建立的应用程序还能在 IE8 中工作,但它们应当更新为使用 documentMode。

如果希望使用 JavaScript 判断一个网页的兼容模式,可以使用下面范例中的可以支持旧版本 IE 的代码。

engine = null;
if (window.navigator.appName == "Microsoft Internet Explorer")
{
   // This is an IE browser. What mode is the engine in?
   if (document.documentMode) // IE8
      engine = document.documentMode;
   else // IE 5-7
   {
      engine = 5; // Assume quirks mode unless proven otherwise
      if (document.compatMode)
      {
         if (document.compatMode == "CSS1Compat")
            engine = 7; // standards mode
      }
   }
   // the engine variable now contains the document compatibility mode.
}

X-UA-Compatible 内容标记

IE=8: Web page supports IE8 mode, which is also called “IE8 standards mode.”

IE=7: Web page supports IE7 mode, which is also called “IE7 standards mode.”

IE=5: Web page supports IE5 mode, which is also called “quirks mode.”

IE=EmulateIE8: If the Web page specifies a standards-based doctype directive, the page supports IE8 mode; otherwise, it supports IE5 mode (“quirks mode”).

IE=EmulateIE7: If the Web page specifies a standards-based doctype directive, the page supports IE7 mode; otherwise, it supports IE5 mode (“quirks mode”).

IE=Edge: Web page supports the highest mode available to the version of Internet Explorer used to display the page. This option is generally intended for testing purposes.

各种兼容模式代码范例

<meta http-equiv="X-UA-Compatible" content="IE=5" />

像是使用了 Windows Internet Explorer 7 的 Quirks 模式,这与 Windows Internet Explorer 5 显示内容的方式很相似。

<meta http-equiv="X-UA-Compatible" content="IE=7" />

无论页面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的标准渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=8" />

开启 IE8 的标准渲染模式,但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本,因此等同于冗余代码。

<meta http-equiv="X-UA-Compatible" content="edge" />

Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容,这实际上破坏了“锁定”模式。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示,而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。

注意:IE只会执行网页中第一个 X-UA-Compatible 标头。

可以使用多个属性值来指定网页兼容模式,这能使网页在将来的浏览器版本中保持显示一致。如果需要设置多个兼容模式,使用分号分开各个模式。

如果一个特定版本的 IE 支持的可用兼容模式多于一种,则将采用列于标头属性中最高的可用模式。尽管不推荐这样做,但是可以使用这个特性来排除特定的兼容模式。下面的例子将会排除 IE7 模式。

<meta http-equiv="X-UA-Compatible" content="IE=5; IE=8" >

如果用户安装了Google Chrome Frame,则使用Google Chrome Frame页面,如果没有,则使用最新的IE内核渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

chrome=1,指Google Chrome Frame使用户的IE浏览器外观不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核渲染页面,而且支持IE6、7、8等多个版本的IE浏览器

apache服务器:
.htaccess添加:

<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge" env=ie
    BrowserMatch chromeframe gcf
    Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>

nginx服务器:
虚拟机conf配置文件中,server{}段最后添加:

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

参考资料:MSDN:Defining Document Compatibility

一月 18, 2011 | In: 网页

Comment Form

You must be logged in to post a comment.