Beating IE8 ‘Compatibility View’

The main website I work for was getting complaints from users that one of our pages was displaying “broken”. As it turns out, it was a problem in IE only and it had to do with the new “Compatibility View”. When Compatibility View was on the layout of the content was totally jacked, no-where near readable.

After figuring that out I had to figure out how to stop the users from being able to view our website in Compatibility View. So me and another associate from work start hitting the webs to see what we can dig up. I come across a page on Microsoft’s MSDN website saying you need to send your information to them to be added to a white list that they keep and distribute to the browsers. You have got to be kidding me!

Right after I find that link my buddy from work shoots me another link to another page on M$’s MSDN site and this link to a blog saying all I had to do was insert a meta tag right after the opening head tag and it would force IE into what ever version I wanted. Sweet!

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

Unfortunately it didn’t work in my scenario. I, like many others, am using some of the built in CF UI components which forces the loading of CF’s supporting files immediately after the opening of the head tag. So trying to add a meta tag before that is futile! Also, you would have to add it to every page on the site unless you were using some sort of template system.

So with the meta tag in mind I go back and take another look at the second MSDN page and this little chink of code jumps out at me. It basically states that using the config file for an M$ .NET/ASP site you can set a custom header to force IE to your needs;

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

So I do a quick Google to see if I can dig up any more info on it because we/I don’t use any of that on the website and I come across this page that says you can just add it to the IIS config under Custom HTTP Headers. Even better! This would take care of it site wide. How delicious!

As I was writing an email to my buddy on what I found so he can make the changes on the server I started thinking of other ways that this can be accomplished. Hmmmmm? In my case, I just added one line of code to my main template file;

<cfheader name="X-UA-Compatible" value="IE=8" />

Done deal! In Coldfusion you could also add it to your application.cfm/cfc if needed, but if you do remember that it will be called on before every cfm page is processed. Meaning, if you are using any includes the extra header will be sent for that include. This could result in some weird display issues.

It then gets me thinking how I can do it in Apache on either a server wide basis or per site. Of course it gets a little more tricky but relatively it’s not that painful!

First and foremost you have to make sure you have apache configured with mod_headers and that it’s loaded in your config. If you have access you your server/apache config, open the httpd.conf in your favorite editor and check to see if the following line is in your modules/ Dynamic Shared Object (DSO) Support;

LoadModule headers_module modules/mod_headers.so

If it’s there and not commented out, i.e. doesn’t have a # in front of it, you are ready to go. While you have the file open, now is the time to decide how you want to apply the workaround. If you just want it to be applied server wide add the following line just below the modules section, or anywhere below that point, I just chose to put it there for convenience.

Header add X-UA-Compatible "IE=8"

Save the file and restart httpd. It now should be applied server wide. You could for insurance wrap it in an if statement as shown below just in case, but I like living on the edge!

<IfModule mod_headers.c>
Header add X-UA-Compatible "IE=8"
</IfModule>

If you want to use it on a site per site basis then there are 2 ways of doing so. The first is by adding the above line to the virtual server config for the website. The other is by adding to the .htaccess file. Either way will accomplish the same purpose.