Forcing IE to NOT use compatibility mode...ever.

Posted on Mon Apr 9, 01:27 PM by Nate

So on Friday a redesign of Park Region Telephone was launched which I've been working on for the better part of a year here at work. We'd been debugging things for a couple weeks internally and we were pretty sure we had fixed every bug that could be reasonably be fixed to make the site as cross browser as possible.

Enter Internet Explorer 9 and compatibility mode

OK it’s 2012, can we get rid of compatibility mode now? Please, pretty please? Look Microsoft, just about every competing browser on the market rolls out frequent updates to forward the web. What do you do? You launch a browser that allows people to render websites in at most two full versions prior to the current one though compatibility mode. A good portion of a day was spent trying to eradicate the option for a user to switch into compatibility mode in Internet Explorer 9 so that my CSS and JS wouldn’t get jacked.
Microsoft’s own spec states that by using the head and doctype like the following should disable the compatibility mode option in IE9.

<!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    </head>

I tried this technique and the .htaccess trick from the HTML5 Boilerplate:

<IfModule mod_headers.c>
    Header set X-UA-Compatible "IE=Edge,chrome=1"
    <FilesMatch "\.(js|css|gif|png|jpe?g|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
    Header unset X-UA-Compatible
    </FilesMatch>
</IfModule>

Which didn't work either. The only luck I had was to set a header in php for the "X-UA-Compatible" to work.

<?php
    header('X-UA-Compatible: IE=edge'); 
?>

So there ya go, if you're having this same problem set a header in PHP (or what ever coding language you fancy) and that should turn off compatibility mode.

comments
/content/js
/content/images
/content/css