Document Compatibility in Internet Explorer 8

Now that IE8 is on the scene and about to hit the street in a big way, it's a good time to learn about the new Document Compatibility features.

Internet Explorer 8 introduces document compatibility. An extension of the compatibility mode introduced in Internet Explorer 6, document compatibility enables you to choose the specific rendering mode that Internet Explorer uses to display your web pages, to help ensure that your web pages have a consistent appearance.  Although IE8 has  "Compatibility View" settings (including a checkbox to "display all websites in Compatibility View"), you cannot rely on users to use these settings.

As a developer, you probably already have your site "doing what you want" for Internet Explorer 7, so the easiest way to control page rendering in IE8 is to use the new "Meta" element to enforce IE 7 rendering behavior.

Internet Explorer 8 comes closer to industry standards than any previous version. Consequently, sites designed for older versions of  IE 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 page. If your site does not display correctly in Internet Explorer 8, you can update the site to support the latest web standards. Or if you're like me and generally fed up with all this monkeying every time a new browser / version comes out, and you're happy with what you have now, you can simply add a special meta element to your pages that tells Internet Explorer 8 to render your site as if it were being viewed in IE7. If you use Master Pages, you need only add the meta tag to the Masters.

Here are the various modes supported:

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

 

Here is a sample HTML Code block that would tell IE8 to render pages the same way that IE7 does:

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

You can also instruct your web server to handle this, from the web.config file:

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

Here are some of the other meta tags:

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

You can determine document mode via client script:

javascript:alert(document.documentMode);

By Peter Bromberg   Popularity  (11731 Views)