Channels ▼
RSS

.NET

Internet Explorer 8 and Compatibility Views



Acid2 is a sample page available at http://www.webstandards.org/action/acid2 created with the precise goal of helping browser vendors to test their product against proper support for latest Web standards. Few of the currently used Web browsers have passed the test. Among the others, I'd like to mention Safari, iCab, Konqueror, Opera and Firefox 3. What about Internet Explorer?

Internet Explorer 8 -- only in beta 2 at the time of this writing -- has passed the Acid2 test; and it is the first version of the Microsoft's browser to make it. The IE8 team worked out a completely new rendering engine that now follows the CSS 2.1 specification as closely as possible.

This new rendering mode is enabled by default for pages hosted in Internet Web sites with the clear purpose of giving users the best possible viewing experience. Unfortunately, such a great viewing experience is only possible if Web pages are created according to the latest Web standards. This is not often the case. To avoid breaking so many Web pages, a compatibility view mode has been added to Internet Explorer 8.

The Compatibility View feature works in a rather intuitive manner. It simply switches back the rendering engine of Internet Explorer 8 to version 7. In this way, from a rendering perspective you are just not using a newer browser. As a result, all sites not explicitly redesigned and restyled for latest standards will display correctly.

How would you activate the Compatibility View mode?

As mentioned, the compatibility mode is disabled by default on Internet Web pages, but it is the default for intranet sites. Large organizations can keep on using their applications as usual even when they upgrade to Internet Explorer 8. In this way, they can plan sites updates ahead and proceed with that as their earliest convenience.

Changing the settings about Compatibility View is possible interactively too. A new UI button is displayed in the navigation bar, at the right end of the address bar and near to the Refresh button. It is worth noting that the button is hidden when you are in Compatibility View mode and only appears when the page is being viewed through the new Standards mode engine.

As a Web developer, you can force a given page to use the new rendering mode or stick to the Internet Explorer 7 rendering mode. All you need is a simple <meta> declaration like the one shown below:


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

You place the tag into the <head> section of the page. As a result, Internet Explorer 8 will render the page using the new standards mode. Likewise, you can programmatically force a legacy rendering through a slightly different <meta> tag:


<meta http-equiv="X-UA-Compatible" content="IE=Emulate7" />

The X-UA-compatible header is not case sensitive. It poses other constraints though. In particular, it must appear in the <head> before all other elements, except for the title element and other <meta> tags.

If you don't want to edit each and every Web page, you can resort to adding a custom header to the site configuration. For IIS 7, the following web.config script suffices:


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

For IIS 6, instead, you resort to the user interface of the IIS Manager. Finally, you can check the rendering engine via JavaScript. You use the documentMode property on the document object.


function IsStandardsMode()
{
   !if(document.documentMode)
       return false;
   return (document.documentMode == 8);
}

The property exists only in Internet Explorer 8 and is undefined for other browsers. It takes a value of 8 if the newest rendering engine is active.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video