Printer Friendly Version      Send     
Click to Rate and Give Feedback
MSDN
MSDN Library
META Tags and Locking in Future Compatibility

Note: This documentation is preliminary and is subject to change.

Document compatibility is an important concern for Web developers. Windows Internet Explorer 8 introduces document compatibility modes that allow Web developers to tell the browser to render their pages in the same way as older versions would, thereby allowing the developer to choose when to update.

This document describes the document compatibility modes supported by Windows Internet Explorer 8 and explains how they may be implemented on a per-page or per-site basis by using custom headers. By implementing the appropriate compatibility mode, a site can ensure compatibility with Windows Internet Explorer 8 and beyond.

Different Compatibility Modes

Windows Internet Explorer 8 supports many compatibility modes that enable different supported features and affect the manner in which content is rendered. For example,

IE5 mode renders content as if it were displayed by Windows Internet Explorer 7's Quirks mode, which is very similar to how Windows Internet Explorer 5 displayed content.

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

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

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, as well as limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft).

Edge mode tells Windows Internet Explorer to display content in the highest mode available, which actually breaks the “lock-in” paradigm. With Windows Internet Explorer 8, this is equivalent to IE8 mode. If a (hypothetical) future release of Windows Internet Explorer supported a higher compatibility mode, pages set to Edge mode would appear in the highest mode supported by that version; however, those same pages would still appear in IE8 mode when viewed with Windows Internet Explorer 8. It is recommended that Web developers restrict their use of Edge mode to test pages and other non-production uses because of the possible unexpected results of rendering page content in future versions of Windows Internet Explorer.

Specifying Compatibility Modes on a Per-Page Basis

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 EmulateIE7 mode compatibility.

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

The content attribute specifies the mode for the page; for example, to mimic Windows Internet Explorer 7 behavior, specify IE=EmulateIE7. Likewise, specify IE=5, IE=7, or IE=8 to select one of those compatibility modes. You can also specify IE=edge to tell Windows 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.

Specifying Compatibility Modes on a Per-Site Basis

A document mode can be specified for your Web site by defining a custom HTTP response header for the site using your Web server. An HTTP response header is the information a Web server attaches to the file it sends to your browser in response to the HTTP request and that usually contains information such as date, size, and type of file that is being sent back.

The following documents describe the steps required to configure your Web server to attach a custom HTTP response header to all of your Web pages. This will cause Windows Internet Explorer 8 to use a specific document compatibility mode, such as EmulateIE7.

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.

Determining Document Compatibility Mode Using Script

To determine the document compatibility mode of a Web page using Windows Internet Explorer 8, use the documentMode property of the document object. For example, typing the following into Windows 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.

Note: The compatMode property introduced in Windows Internet Explorer 6 has been deprecated in favor of the documentMode property introduced in Windows Internet Explorer 8. Applications that currently rely on compatMode will continue to work in Windows 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 Windows Internet Explorer, as shown in the following example.

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

The document object used here represents the HTML document in a given browser window and can be used to examine, modify, or add content to an HTML document and to process events within that document.

Determine Document Compatibility Mode Using Conditional Comments

If only targeting Windows Internet Explorer, the following code example illustrates how to use conditional comments to target current or legacy versions.

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
   <head>
      <title>Test Page</title>
      <meta http-equiv="X-UA-Compatible" content="IE=8"/>
      <!--[if gte IE 8]>
      <style type="text/css">
      body {
       color: #0000ff;
       background-color: #000000;
      }
      </style>
      <![endif]-->
      <!--[if lt IE 8]>
      <style type="text/css">
      body {
       color: #000000;
       background-color: #ffffff;
      }
      </style>
      <![endif]-->
   </head>
   <body>
      <h1>
      <!--[if gte IE 8]>
      Chapter 1.
      <![endif]-->
      First Chapter
      </h1>
      <h1>
      <!--[if gte IE 8]>
      Chapter 2.
      <![endif]-->
      Second Chapter
      </h1>
      Text any version will see.
   </body>
</html>

For more information on versioning and Windows Internet Explorer modes, see Defining Document Compatibility.

© 2008 Microsoft Corporation. All rights reserved. Terms of Use  |  Trademarks  |  Privacy Statement
Page view tracker