Defining Document Compatibility:X-UA-Compatible meta

Recommend:http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx

Chinese:http://www.cnblogs.com/libra/archive/2009/03/24/1420731.html

Introduction
To help ensure that your Web pages have a consistent appearance in future versions of Internet Explorer, Internet Explorer 8 introduces document compatibility. An extension of the compatibility mode introduced in Microsoft Internet Explorer 6, document compatibility enables you to choose the specific rendering mode that Internet Explorer uses to display your Web pages.

This article describes the need for document compatibility, lists the document compatibility modes available to recent versions of Internet Explorer, and shows how to select specific compatibility modes.

 

Understanding the Need for Document Compatibility
Each major release of Internet Explorer adds features designed to make the browser easier to use, to increase security, and to more closely support industry standards. As Internet Explorer gains features, there is a risk that older Web sites may not display correctly.

To minimize this risk, Internet Explorer 6 allowed Web developers to choose the way Internet Explorer interpreted and displayed their Web pages. "Quirks mode" was the default; it displayed pages as if they were viewed with older versions of the browser. "Standards mode" (also known as "strict mode") featured the most support for industry standards; however, to take advantage of this enhanced support, Web pages needed to include an appropriate <!DOCTYPE> directive.

If a site did not include a <!DOCTYPE> directive, Internet Explorer 6 would display the site in quirks mode. If a site contained a valid <!DOCTYPE> directive that the browser did not recognize, Internet Explorer 6 would display the site in Internet Explorer 6 standards mode. Because few sites already included the <!DOCTYPE> directive, the compatibility mode switch was highly successful. It allowed Web developers to choose the best time to migrate their sites to standards mode.

Over time, many sites began to rely on standards mode. They also began to use the features and behavior of Internet Explorer 6 to detect Internet Explorer. For example, Internet Explorer 6 did not support the universal selector; some Web sites used this as a way to serve specific content to Internet Explorer.

Internet Explorer 7 offered new features, such as universal selector support, designed to more fully support industry standards. Because the <!DOCTYPE> directive only supports two settings (quirks mode and standards mode), Internet Explorer 7 standards mode replaced Internet Explorer 6 standards mode.

As a result, sites that relied on the behavior of Internet Explorer 6 standards mode (such as lack of support for the universal selector) failed to detect the new version of the browser. As a result, Internet Explorer-specific content was not served to Internet Explorer 7 and these sites were not displayed as intended. Because Internet Explorer 7 only supported two compatibility modes, the owners of affected sites were forced to update their sites to support Internet Explorer 7.

Internet Explorer 8 more closely supports industry standards than any previous version of the browser. Consequently, sites designed for older versions of the browser may not display as intended. To help mitigate any problems, Internet Explorer 8 introduces the concept of document compatibility, which lets you specify the versions of Internet Explorer that your site is designed to support. Document compatibility adds new modes to Internet Explorer 8; these modes tell the browser how to interpret and render a Web site. If your site does not display correctly in Internet Explorer 8, you can either update the site to support the latest Web standards (preferred) or you can force Internet Explorer 8 to display your content as if it were being viewed in an older version of the browser. This is done by using the meta element to add an X-UA-Compatible header to your Web pages.

This allows you to choose when to update your site to support new features supported by Internet Explorer 8.

 

Understanding Document Compatibility Modes
Internet Explorer 8 supports a number of document compatibility modes that enable different features and can affect the way content is displayed.

Emulate IE8 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 8 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!DOCTYPE> directive.

Emulate IE7 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!DOCTYPE> directive. For many Web sites, this is the preferred compatibility mode.

IE5 mode renders content as if it were displayed by Internet Explorer 7's quirks mode, which is very similar to the way content was displayed in Internet Explorer 5.

IE7 mode renders content as if it were displayed by Internet Explorer 7's standards mode, whether or not the page contains a <!DOCTYPE> directive.

IE8 mode provides the highest support available for industry standards, including the W3C Cascading Style Sheets Level 2.1 Specification  and the W3C Selectors API , and limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) .

Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE8 mode when viewed with Internet Explorer 8.

Because edge mode documents display Web pages using the highest mode available to the version of Internet Explorer used to view them, it is recommended that you limit their use to test pages and other non-production uses.

 

Specifying Document Compatibility Modes
To specify a document mode for your Web pages, use the meta element to include an X-UA-Compatible http-equiv header in your Web page. The following example specifies Emulate IE7 mode compatibility.

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

The content attribute specifies the mode for the page; to mimic the behavior of Internet Explorer 7, specify IE=EmulateIE7. Specify IE=5, IE=7, or IE=8 to select one of those compatibility modes. You can also specify IE=edge to tell Internet Explorer 8 to use the highest mode available.

The X-UA-compatible header is not case sensitive; however, it must appear in the Web page's header (the HEAD section) before all other elements, except for the title element and other meta elements.

 

Configuring Web Servers to Specify Default Compatibility Modes
Site administrators can configure their sites to default to a specific document compatibility mode by defining a custom header for the site. The specific process depends on your Web server. For example, the following web.config file enables Microsoft Internet Information Services (IIS) to define a custom header that automatically renders all pages in IE7 mode.

 

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

If you specify a default document compatibility mode using your Web server, you can override that setting by specifying a different document compatibility mode in a specific Web page. The mode specified within the Web page takes precedence over the mode specified by the server.

Consult the documentation of your particular Web server for information on specifying custom headers. Or, for more information, see:

Implementing the META Switch on Apache
Implementing the META Switch on IIS

Determining Document Compatibility Mode
To determine the document compatibility mode of a Web page using Internet Explorer 8, use the documentMode property of the document object. For example, typing the following into Internet Explorer 8's Address bar displays the document mode for the current Web page.

 

javascript:alert(document.documentMode);
The documentMode property returns a numeric value corresponding to the page's document compatibility mode. For example, if a page has chosen to support IE8 mode, documentMode returns the value 8.

The compatMode property introduced in Internet Explorer 6 is deprecated in favor of the documentMode property introduced in Internet Explorer 8. Applications that currently rely on compatMode continue to work in Internet Explorer 8; however, they should be updated to use documentMode.

If you wish to use JavaScript to determine a document's compatibility mode, include code that supports older versions of Internet Explorer, as shown in the following example.

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

 

Understanding Content Attribute Values
The content attribute is flexible in that it accepts values other than the ones described previously. This allows you greater control over the way Internet Explorer displays your Web pages. For example, you can set the content attribute to IE=7.5. When you do this, Internet Explorer attempts to convert the value to a version vector and selects the mode closest to that result. In this case, Internet Explorer would be set to IE7 mode. The following examples show the modes selected for other values when there are no other mitigating factors.

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

 
Note  The previous example shows the results of individual content values. In practice, Internet Explorer only respects the first X-UA-Compatible header in a Web page.
You can also use the content attribute to specify multiple document compatibility modes; this helps ensure that your Web pages are displayed consistently in future versions of the browser. To specify multiple document modes, set the content attribute to identify the modes you want to use. Use a semicolon to separate each mode.

If a particular version of Internet Explorer supports more than one requested compatibility mode, it will use the highest available mode listed in the header's content attribute. You can use this fact to exclude specific compatibility modes, although this is not recommended. For example, the following header excludes IE7 mode.

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

Controlling Default Rendering
When Internet Explorer 8 encounters a Web page that does not contain an X-UA-Compatible header, it uses the <!DOCTYPE> directive to determine how to display the page. If the directive is missing or does not specify a standards-based document type, Internet Explorer 8 displays the page in IE5 mode (quirks mode).

If the <!DOCTYPE> directive specifies a standards-based document type, Internet Explorer 8 displays the page in IE8 mode, except in the following cases:

• Compatibility View is enabled for the page.
• The page is loaded in the Intranet zone and Internet Explorer 8 is configured to pages in the Intranet zone in Compatibility View.
• Internet Explorer 8 is configured to display all Web sites in Compatibility View.
• Internet Explorer 8 is configured to use the Compatibility View List, which specifies a set of Web sites that are always displayed in Compatibility View.
• The Developer Tools are used to override the settings specified in the Web page.
• The Web page encountered a page layout error and Internet Explorer 8 is configured to automatically recover from such errors by reopening the page in Compatibility View.

For more information, see Internet Explorer Blog: Compatibility View Recap .

Note  When configured to load Intranet pages in Compatibility View, Internet Explorer makes an exception for pages loaded using the localhost address or a loopback address. Pages loaded using one of these techniques are displayed in IE8 mode when the <!DOCTYPE> directive specifies a standards-based document type.
In addition, the following registry key allows you to control the way Internet Explorer handles pages that do not contain X-UA-Compatible headers.

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
     SOFTWARE
          Microsoft
               Internet Explorer
                    Main
                         FeatureControl
                              FEATURE_BROWSER_EMULATION
                                   iexplore.exe = (DWORD)
The DWORD value must equal one of the following values.

Value　　Description
7000　　 Pages containing standards-based <!DOCTYPE> directives are displayed in IE7 mode.
8000　　 Pages containing standards-based <!DOCTYPE> directives are displayed in IE8 mode.
8888　　 Pages are always displayed in IE8 mode, regardless of the <!DOCTYPE> directive. (This bypasses the exceptions listed earlier.)

By default, applications hosting the WebBrowser Control open standards-based pages in IE7 mode unless the page contains an appropriate X-UA-Compatible header. You can change this by adding the name of the application executable file to the FEATURE_BROWSER_EMULATION feature control key and setting the value accordingly.

 

Conclusion
Compatibility is an important consideration for Web designers. While it's best to create sites that do not rely on specific behaviors or features of a Web browser, there are times when this is not possible. The document compatibility mode ties a Web page to the behavior of a specific version of Internet Explorer.

Use the X-UA-Compatible header to specify the versions of Internet Explorer that your pages support. Use document.documentMode to determine the compatibility mode of a Web page.

By choosing to support a specific version of Internet Explorer, you can help ensure that your pages will display consistently in future versions of the browser.