Internet Explorer and compatibility modes… I already posted about that topic earlier.
Yet, I recently began trying out Bootstrap (as you may have noticed if you keep an eye on Keyboard Playing’s homepage, or if you tried to have a look at the About or cyChop page which appear in the top menu) and discovered a new
<meta /> tag in it. This was the right way to do it…
Replacing something dirty with something clean
Last time, I wrote (inspired from a French blog post) that to force IE, a sufficient way was to force a version number higher than any IE existing yet:
<meta http-equiv="X-UA-Compatible" content="IE=100" >
This works. Yet, there is a cleaner way to do this:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
There are two interesting things:
IE=edge will force Internet Explorer to use the latest rendering engine available;
chrome=1 tells that if Google Chrome Frame is installed, it should be used to render the page.
Of the place of the tag in page [Update 2013-12-04]
When running a page through IE with the compatibility mode active, you can meet this warning:
X-UA-Compatible META tag ignored because document mode is already finalized.
This simply means IE already began rendering your HTML and cannot change the mode it chose. To prevent this, just remember:
<meta/> tags should always be at the top of the
<head/> section. No other tag before all
<meta/> have been written.
Still getting better
Don’t want to add this header to all your pages? If you use a .htaccess file (or even better, if you have access to your Apache configuration file), you can set your server to send this instruction along with the HTTP headers (as I have done on Keyboard Playing, and should extend to the blog soon). It will then automatically apply to all the pages of your website.
Here is the code you would need to apply:
BrowserMatch (MSIE|Trident) ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
There, you’re all set!
(edit: a reader highlighted the fact that, as of IE11, IE has no longer ‘MSIE’ in its user agent, but is using ‘Trident’ instead)