How Do I Fix My Site Today?

Balancing new features and functionality with site compatibility for the existing Web is a fundamental concern of Windows Internet Explorer development. Windows Internet Explorer 8 introduces compatibility modes to help ease the transition from legacy to the new standards. For more information about Windows Internet Explorer 8 compatibility modes, read the following document.

This document will take you through the steps required to fix your site so that it will properly render in Windows Internet Explorer 8.

The Quick Short-Term Fix

You maintain an existing Web page that works correctly in Windows Internet Explorer 7, and you would like to update it so that it will work in Windows Internet Explorer 8 but with the least amount of modification. There are two methods available. You can either add a compatibility-mode META tag to each page that will force Windows Internet Explorer 8 to render the page similarly to Windows Internet Explorer 7. Or, if you control your Web server, you can have your server add the compatibility automatically by configuring it to send a custom HTTP response header equivalent to the META tag with each Web page.

How to Modify Each Page

Place the following HTML META tag into the HEAD element of each Web page (before tags other than TITLE or META):

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

This will tell Windows Internet Explorer 8 to render each page as Windows Internet Explorer 7 would, fixing your Web site.

How to Configure the Server to Modify Each Page Automatically

To automatically add the same compatibility to each page as the HTML META tag, configure your server to send the following header:

X-UA-Compatible: IE=EmulateIE7

To configure Microsoft Internet Information Services (IIS) 7.0, configure the Web.config file as follows:

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

(Add the Web.config file into the directory in which you want the change applied.)

Note that META compatibility mode switch tags that are present in a Web page's actual markup always trump the HTTP header declaration.

For more information on how to configure your Web server (including IIS 6.0) to send the custom HTTP response header, read the following documents.

These short-term fixes are recommended only for quick, temporary use. Eventually you should modify your Web site so that it sends standards-based code to Windows Internet Explorer 8 and above, and legacy code to earlier versions of Windows Internet Explorer.

You maintain an existing Web page that works correctly in Windows Internet Explorer 7. You want to create a standards-based page that will work correctly in Windows Internet Explorer 8, with special-case handling for legacy browser versions. After you have added the new CSS 2.1 functionality to the main page flow, you will need to configure the compatibility mode to IE8 Standards and use conditional comments to provide fix-ups for legacy versions of Windows Internet Explorer.

Setting the Compatibility Mode to IE8 Standards

Place the following HTML META tag into the top of the HEAD element of each Web page (before tags other than TITLE or META):

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

This will tell Windows Internet Explorer 8 to render each page using CSS 2.1 standards.

You can also configure your Web server, as demonstrated above, for site-wide changes; simply change the content value to “IE=8”. Remember that any page-level META changes trump the header values, so any page-level headers may have to be changed or removed.

Using Conditional Comments to Keep Your Site Working With Legacy Browsers

The following code example illustrates how to use conditional comments to target CSS to current or legacy versions of Windows Internet Explorer.

<!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 browser detection techniques, read the following documents.

The permanent solution described here is the method most recommended for fixing your Web site. By adhering to these standards, your site will function equally well under both legacy versions of Windows Internet Explorer and Windows Internet Explorer 8, as well as under any future versions released.