How Do I Fix My Site Today?

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

  • Introduction 
  • The Quick Short-Term Fix 
  • How to Modify Each Page 
  • How to Configure the Server to Modify Each Page Automatically 
  • The Recommended Permanent Solution 
  • Setting the Compatibility Mode to IE8 Standards 
  • Using Conditional Comments to Keep Your Site Working With Legacy Browsers 

Introduction

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

The Quick Short-Term Fix

You maintain an existing Web page that works correctly in Internet Explorer 7, and you would like to update it so that it will work in 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 Internet Explorer 8 to render the page similarly to 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 Internet Explorer 8 to render each page as 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 Internet Explorer 8 and above, and legacy code to earlier versions of Internet Explorer.

You maintain an existing Web page that works correctly in Internet Explorer 7. You want to create a standards-based page that will work correctly in 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 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 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 Internet Explorer and Internet Explorer 8, as well as under any future versions released.