web hacks

That pesky IE compatibility view... how to turn compatibility view off

Internet Explorer is a tricky browser to design for. I, like others, spend countless hours making my web standards pages work in IE, too. 

Here's a patch/hack/fix I applied today to fix the problem of Internet Explorer rendering my web page differently to a user with IE's compatibility view "on" than "off." Just as a note, You can tell if IE compatibility mode is on if the little page icon in the browser shows up as a solid color instead of an outline.

You might need this method applied if your site works well without compatibility view (or in webkit browsers), but does weird things due, usually, to stylesheets using conditional formatting or for html5 compatibility.

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

For a list of the different meta content options to include, this article was phenomal.

Make this be the first meta tag in the list of metas, otherwise IE9 won't be happy.

When the above meta tag is included in the <head> element of your page, the user is no longer presented the option to "toggle into" compatibility view. In my case, they don't need compatibility view. This is a great hack if rendering the page to work without compatibility view is not an option.



Note: This workaround won't do it for you if the user has already added your website specifically to the Compatibility View list from within IE's compatibility settings. You may have to direct them to instructions to remove it, if that's the case. But... let's face it, if they figured out how to add it to that list, then either they aren't in control (a domain policy may add the site via security settings) or they already know what they are doing and will probably google it faster than you can walk them through it.