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