Note: This post describes how to use the Compatibility META tag correctly in order to force IE9 to switch to an older browser mode. If you’d rather skip the explanation and get to the technical stuff, simply scroll down to the last paragraph.
There are many posts addressing IE compatibility issues. This post from the IE team, back in 2008, also demonstrated how META tags or Http Headers can be used to control Compatibility View in IE8 (now also in IE9). This was supposed to help us developers to overcome compatibility problems without having the user to do anything (well, this was the intention…)
In short, older IE browsers support quite a few “IE only features”. If these were used in your website, they could break if your users upgrade their browser to a newer IE. This might happen because IE is becoming more and more compatible with world-wide standards. In other words, Microsoft is taking out stuff which wasn’t supposed to be there in the first place, and are also making sure that stuff which was supposed to work is actually working the way it was supposed to work in the first place (mainly CSS and rendering issues).
While this is a good and promising direction from Microsoft, this could be bad for your website. For example, if you’re using 3rd party controls which are a year or more older on your web application, these may break as their code was probably written prior to IE9 betas which allowed tests. Upgrading to the latest version of these controls is not always an option as some of these may no longer be supported. Even upgrading your own code may be costly.
Fortunately, the IE team thought of these issues and have provided us with a solution. Those meta tags/headers previously mentioned. According to their blogs and documentation, a developer could specify a meta tag instructing the browser to use a more compatible mode, so that the website will not break. Following the instructions here, you should be able to place the following meta tag in your head section (you can replace the EmulateIE8 with supported values as listed here or here):
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
While this should have solved the now-breaking website – it didn’t. IE9’s Developer Tools (F12) Script tab displayed the following error:
HTML1115: X-UA-Compatible META tag (‘IE=EmulateIE8’) ignored because document mode is already finalized.
Needless to say, this was frustrating. In order to try and figure this out, I have downloaded the IE9 Platform Preview. Basically this is an IE9 browser, which provides two great benefits:
1) It runs side by side to the existing IE browser and does not replace it, as a regular installation would have. So it saves you the trouble of installing a VM machine to test things or simply installing a non-released IE9 instead of your current IE.
2) On the Status Bar of the Platform Preview is easily visible the running Document Mode. While this info is available also in the Developer Tools of IE9 Beta/RC if you do choose to install it, having the status bar display the Document Mode constantly is just plain comfort.
After debugging and creating a new website to test why IE9 fails to switch to IE8, the problem seemed to be the position of the meta tag. It seems like the X-UA-Compatible tag has to be the first tag in the <head> section. If this conclusion is correct, then I believe it is undocumented in Microsoft’s blogs/msdn (and if it is documented, then it isn’t sticking out well enough from the docs). Ensuring that this was the first meta tag in the <head> forced IE9 to switch to IE8 mode successfully, and the website started working again.
I Came, I Learned, I Blogged 