定义文档兼容性，使页面适应各个版本的IE浏览器-优米格

吐槽IE浏览器的话就不再多说，直接进入今天的正题。

文档兼容性是每个程序员，在进行前端开发的工作中，难以避免又不得不面对的问题，文档兼容性可定义 Internet Explorer 呈现网页的方式。本文将介绍文档兼容性、如何为网页指定文档兼容性模式以及如何确定网页的文档模式。

简介

为了保证网页在各个IE版本中具有一致的外观，Internet Explorer 8 引入了文档兼容性。文档兼容性是对 Microsoft Internet Explorer 6 中引入的兼容性模式的扩展，从而让程序员可以自主选择Internet Explorer 用于显示网页的特定呈现模式。

文档兼容性的必要性

Internet Explorer 的每个主要版本中都会添加一些功能，旨在使浏览器更易于使用、提高安全性以及更紧密地支持行业标准。随着 Internet Explorer 的功能不断增加，将会出现较早的网站可能无法正常显示的风险。

为了最大程度地降低这种风险，Internet Explorer 6 允许 Web 开发人员选择 Internet Explorer 用来解释和显示其网页的方式。默认为“Quirks 模式”；在这种模式下，将按照使用较旧的浏览器版本查看网页的方式来显示网页。 “标准模式”（也称为“严格模式”）的特点是可提供对行业标准的最大支持；但是，若要利用此增强的支持，网页中需要包括适当的<!DOCTYPE> 指令。

如果某个站点未包括 <!DOCTYPE> 指令，则 Internet Explorer 6 将使用 Quirks 模式显示该站点。如果某个站点包含有浏览器未能识别的有效 <!DOCTYPE> 指令，则 Internet Explorer 6 将使用 Internet Explorer 6 标准模式显示该站点。由于已经包含<!DOCTYPE> 指令的站点很少，因此兼容性模式切换极为成功。这样使 Web 开发人员能够选择最佳时间将其站点迁移到标准模式。

随着时间的推移，许多站点都开始依赖标准模式。这些站点同时还开始使用 Internet Explorer 6 的功能和行为来检测 Internet Explorer。例如，Internet Explorer 6 并不支持通用选择器（可能为英文网页）；而某些网站将此用作为 Internet Explorer 提供特定内容的方式。

Internet Explorer 7 提供了通用选择器支持等新功能，旨在更全面地支持行业标准。由于<!DOCTYPE> 指令仅支持 Quirks 模式和标准模式这两种设置，因此 Internet Explorer 7 标准模式替换了 Internet Explorer 6 标准模式。

结果，依赖于 Internet Explorer 6 标准模式的行为的站点（如缺乏对通用选择器的支持）将无法检测到新版本的浏览器。因此，Internet Explorer 特定的内容不会提供给 Internet Explorer 7，并且这些站点不会按预期显示。由于 Internet Explorer 7 仅支持两种兼容性模式，因此将会迫使受影响站点的所有者更新其站点以支持Internet Explorer 7。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

这将允许您选择何时更新站点以支持由 Internet Explorer 8 支持的新功能。

了解文档兼容性模式

Internet Explorer 8 支持很多文档兼容性模式，这些模式启用不同的功能并可影响内容的显示方式。

“模仿 IE8”模式将告诉 Internet Explorer 使用<!DOCTYPE> 指令来确定如何呈现内容。标准模式指令将以 Internet Explorer 8 标准模式显示，而 Quirks 模式指令将以 IE5 模式显示。与 IE8 模式不同，“模仿 IE8”模式遵循<!DOCTYPE> 指令。
“模仿 IE7”模式将告诉 Internet Explorer 使用<!DOCTYPE> 指令来确定如何呈现内容。标准模式指令以 Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，“模仿 IE7 模式”遵循指令。对于很多网站来说，这是首选的兼容性模式。
IE5 模式呈现内容的方式如同使用了 Internet Explorer 7 的 Quirks 模式来显示内容，这与 Internet Explorer 5 显示内容的方式非常相似。无论页面是否包含<!DOCTYPE> 指令，IE7 模式呈现内容的方式均如同使用了 Internet Explorer 7 的标准模式来显示内容。
IE8 模式可最大程度地支持行业标准（包括 W3C 级联样式表级别 2.1 规范（可能为英文网页）万维网链接和 W3C 选择器 API（可能为英文网页）万维网链接），并提供对 W3C 级联样式表级别 3 规范（工作草案）（可能为英文网页）万维网链接的有限支持。
Edge 模式将告诉 Internet Explorer 以可用的最高级别模式显示内容。对于 Internet Explorer 8，这等同于 IE8 模式。假设 Internet Explorer 的将来版本支持更高级别的兼容性模式，那么，设置为 Edge 模式的页面将以该版本支持的最高级别的模式显示。当使用 Internet Explorer 8 查看时，这些相同的页面仍会以 IE8 模式显示。

由于 Edge 模式的文档使用查看网页所用的 Internet Explorer 版本可用的最高级别模式来显示网页，因此，建议仅将 Edge 模式用于测试页面和其他非生产活动。

指定文档兼容性模式

若要为网页指定文档模式，请使用 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>

content 属性指定页面的模式；若要模仿 Internet Explorer 7 的行为，请指定“IE=EmulateIE7”。指定“IE=5”、“IE=7”或“IE=8”可选择相应的兼容性模式。还可以指定“IE=edge”以告诉 Internet Explorer 8 使用可用的最高级别模式。

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

配置 Web 服务器以指定默认兼容性模式

网站管理员可以通过定义站点的自定义标头，将其站点配置为默认采用特定的文档兼容性模式。具体过程将依您的 Web 服务器而定。例如，通过以下 web.config 文件，可以让 Microsoft Internet Information Services (IIS) 定义一个自定义标头，以便自动按照 IE7 模式呈现所有页面。

<?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>

如果使用 Web 服务器指定了默认的文档兼容性模式，则可通过在特定的网页中指定不同的文档兼容性模式来覆盖默认设置。在网页中指定的模式优先于由 Web 服务器指定的模式。

确定文档兼容性模式

若要确定使用 Internet Explorer 8 的网页的文本兼容性模式，请使用 document 对象的 documentMode 属性。例如，将以下内容键入到 Windows Internet Explorer 8 的地址栏中，可显示当前网页的文档模式。

javascript:alert(document.documentMode);

documentMode 属性将返回一个与页面的文档兼容性模式相对应的数值。例如，如果某个页面已选择支持 IE8 模式，则 documentMode 将返回值 8。

在 Internet Explorer 6 中引入的 compatMode 属性已被弃用，取而代之的是在 Internet Explorer 8 中引入的 documentMode 属性。当前依赖于 compatMode 的应用程序仍然可以在 Internet Explorer 8 中运行；但是，应将这些应用程序更新为使用 documentMode。

如果希望使用 JavaScript 来确定文档的兼容性模式，则应包含支持 Internet Explorer 旧版本的代码，如以下示例中所示。

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.
}

了解 content 属性值

content 属性的使用很灵活，它可以接受除前面所述的值之外的值。这样，您就能够更好地控制 Internet Explorer 显示网页的方式。例如，可以将 content 属性设置为 IE=7.5。当您如此设置之后，Internet Explorer 会尝试将该值转换为版本矢量（可能为英文网页），并选择与转换结果最接近的模式。在本例中，Internet Explorer 将会设置为 IE7 模式。以下示例显示了为其他值选择的模式（如果不存在其他缓解因素）。

 <meta http-equiv="X-UA-Compatible" content="IE=4">   <!-- IE5 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=7.5" > <!-- IE7 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=100" > <!-- IE8 mode -->
    <meta http-equiv="X-UA-Compatible" content="IE=a" >   <!-- IE5 mode --> 

    <!-- This header mimics Internet Explorer 7 and uses 
         <!DOCTYPE> to determine how to display the Web page -->
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

注意：上一个示例显示了各个 content 值的结果。实际上，Internet Explorer 仅遵循网页中的第一个 X-UA-Compatible 标头。
还可以使用 content 属性来指定多个文档兼容性模式；这将有助于确保网页在将来的浏览器版本中显示一致。若要指定多个文档模式，应设置 content 属性
以标识要使用的各个模式。各个模式之间使用分号分隔。

如果某个特定的 Internet Explorer 版本支持多个请求的兼容性模式，则该版本将使用标头的 content 属性中列出的可用的最高级别模式。可以利用这一原理来排除特定的兼容性模式，但不建议这样做。例如，下面的标头排除了 IE7 模式。

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

控制默认呈现

当 Internet Explorer 8 遇到未包含 X-UA-Compatible标头的网页时，它将使用<!DOCTYPE> 指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。

如果<!DOCTYPE> 指令指定了基于标准的文档类型，则 Internet Explorer 8 将以 IE8 模式显示该网页，但出现以下情况时除外：

为该网页启用了兼容性视图。
该网页是在 Intranet 区域中加载的，并且已将 Internet Explorer 8 配置为使用兼容性视图来显示 Intranet 区域中的网页。
已将 Internet Explorer 8 配置为使用兼容性视图来显示所有网站。
已将 Internet Explorer 8 配置为使用兼容性视图列表（其中指定了一组始终使用兼容性视图显示的网站）。
已使用开发人员工具覆盖在该网页中指定的设置。
该网页遇到了页面布局错误，并且已将 Internet Explorer 8 配置为，通过在兼容性视图中重新打开网页来自动从此类错误中恢复。

总结

对于 Web 设计人员来说，兼容性是一个要考虑的重要问题。尽管最好是创建不依赖于 Web 浏览器的特定行为或功能的站点，但有时这样做是不可能的。文档兼容性模式将网页与 Internet Explorer 特定版本的行为相关联。

使用 X-UA-Compatible 标头可指定页面支持的 Internet Explorer 版本。使用 document.documentMode 可确定网页的兼容性模式。

通过选择支持特定的 Internet Explorer 版本，可有助于确保页面在将来的浏览器版本中能够显示一致。

PS:本文摘自[点我查看原文]，并有所补充。

定义文档兼容性，使页面适应各个版本的IE浏览器

评论抢沙发

最新评论

合作&反馈&投稿

商务合作、问题反馈、投稿，欢迎联系

评论 抢沙发

最新评论

合作&反馈&投稿

商务合作、问题反馈、投稿，欢迎联系

评论抢沙发