Forcing Internet Explorer 8 Out of Compatibility Mode (Quick Fix)

There is nothing worse than spending weeks designing and developing the perfect website, only to have the client send you a bug report with the screenshot clearly showing they are in compatibility mode. Floats don’t work right, transparent pngs are partially broken, and all that fancy CSS3 stuff that (sort-of) works in IE9/10? Yep. That’s broken too. So how do you fix it?

There are four different ways to defeat compatibility mode in IE:

  1. Support IE7. This sounds crazy, but if you need to anyway, you shouldn’t have a problem. All of the changes, edits, fixes, etc you use to support IE7 *normally* work in compatibility mode. Still, from a “responsible web citizen” perspective, don’t punish your users of modern browsers because some of your users still use IE7. (I digress… that’s a different rant for a different day).
  2. Set the X-UA-Compatible meta tag:

    This implementation of the HTTP header has a devastating bug in IE8. If you have a conditional statement before it in the file, it doesn’t work. That means, for example, if you wrap your <html> tag in a conditional, it breaks this.

  3. Set the header on the server. This is the most fool-proof method of accomplishing what we set out to do today, but obviously is problematic if you don’t have the right level of server access to do so.

    • Apache (in .htaccess): 
      Header set X-UA-Compatible "IE=edge,chrome=1"
    • Microsoft IIS (in web.config):

Numbers two and three both do basically the same thing. IE=edge pull a user out of compatibility mode if they have it activated when they land on your site, and hide the compatibility mode button so they can’t accidentally activate it while on your site. Success! chrome=1 is a bonus. If the user has Chrome Frame installed, it loads your site in Chrome Frame, which means they get all the HTML5/CSS3 goodness you built.

No compatibility mode!