Home > Not CodeFluent Related :) > How to enable IE 9 compatibility mode for your website

How to enable IE 9 compatibility mode for your website


For each major release IE gains new features and brings its support to industry standards more closely. However it also increases risk that older websites may not display correctly.

As a matter of fact, playing with IE 10 Developer Preview we noticed some rendering errors on our documentation web pages. We fixed it using the compatibility mode feature introduced by IE 8. With the upcoming release of IE 10 many customer sites will fall into the same kind of problem so here is how to fix it:

We need to force the client browser to use the Compatibility View when they visit our site. This is done either at the webpage level by adding the following meta tag to the header of each webpage you want to use compatibility mode:

<head>
  <!-- Mimic Internet Explorer 9 -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" >
  <title>My webpage</title>
</head>

 

or at the folder level by adding the following header to each Web.config file of each web directory you want to use compatibility mode:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <clear />
        <add name="X-UA-Compatible" value="IE=EmulateIE9" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
</configuration>

 

or at the website level by implementing the META Switch directly on IIS as follow:

To configure IIS 7 on a Windows Server 2008-based computer to include a custom HTTP response header:

  1. Click Start, click Administrative Tools, and then click Internet Information Services (IIS) Manager.
  2. In the connections pane, expand the node for the server, and then expand .
  3. Click the Web site where you want to add the custom HTTP response header.
  4. In the Web site pane, double-click in the section.
  5. Under Actions, click Add.
  6. In the Name box, type X-UA-Compatible.
  7. In the Value box, type IE=EmulateIE9.
  8. Click OK.

To configure IIS 6 and earlier versions to include a custom HTTP response header:

  1. Click Start, click Run, type inetmgr.exe, and then click OK.
  2. Expand the server you want and then expand Web Sites.
  3. Right-click the Web site you want and then click Properties.
  4. Click the HTTP Headers tab.
  5. Under Custom HTTP headers, click Add.
  6. In the Custom header name box, type X-UA-Compatible.
  7. In the Custom header value box, typeIE=EmulateIE9.
  8. Click OK two times.

Note that all other browsers will simply ignore this custom HTTP Header. Also note that the compatibility mode set a the website level using your Web server can be overridden by setting a different compatibility mode at the web page level.

You can find more information here: Defining Document Compatibility.

Hope this helps.

Thibault NESTOR

  1. Holly
    May 23, 2013 at 6:18 pm | #1

    THANK YOU!!! IE 10 was ruining my life – and you have given me the information to fix it! Thank you so much :-)

  2. ITPro
    June 18, 2013 at 9:13 am | #2

    Hi,

    This worked for us except one problem. We used HTTP response header on the IIS side (on W2K8) and our local website is opening in the compatible mode on the client side but clients are not able to access through our proxy server. It works just fine without the proxy settings in the IE.

    Is there any thing we can get it worked through proxy as well ?

    Many thanks!

  3. July 4, 2013 at 11:16 pm | #3

    This was really helpful, thanks. I have a site I created some time ago and IE10 has played havoc with the colour of the links and suchlike. Why can’t they just leave things alone? Anyway I introduced the IE9 compatibility meta header to the pages and it works perfectly. I’d spent hours messing around with this so wish I’d found you before. Really appreciated – nice to know there are still good guys out there. Neil

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 41 other followers