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 
Nicolai Høeg Pedersen
24/03/2011 at 19:01
I had a similar problem.
Had a page rendered in IE9 standard compliance mode opened in the browser. Inserted the emulate tag and did F5 and it did not change to IE8 standards compliance mode.
Messed around and could not get it to work – until I shot down the window and opened it again… Then it worked. Seems like IE “remembers”…
evolpin
24/03/2011 at 21:01
Surprising (or not…), but IE8 emulation mode isn’t identical to running IE8. We’re using a well-known 3rd party provider which seem to break even in IE8 standards mode, but work well on IE8. So this isn’t necessary a “magic” solution and developers are now required to perform extensive checking to see that they’re compatible with IE9 or IE8 emulation mode too.
Reza Qorbani
24/05/2011 at 07:05
There is also another alternative way which I preferred and works for me even with my WordPress projects hosted on Linux box:
IF WINDOWS:
Add following to your web.config:
IF LINUX:
Add this to .htaccess file:
BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
webeditors
29/07/2011 at 23:27
.htaccess trick works like a charm… thank you for sharing!
estaibio
29/02/2012 at 09:40
most helpful thing ever
Reza Qorbani
24/05/2011 at 07:07
There is also another alternative way which I preferred and works for me even with my WordPress projects hosted on Linux box:
IF WINDOWS:
Add following to your web.config:
IF LINUX:
Add this to .htaccess file:
BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
Jack
19/10/2011 at 10:20
I added the meta tag as per your comment but i don’t see its working.. I using Linux machine.
evolpin
19/10/2011 at 11:48
Hi Jack,
The different comments in this post may include hints on what the problem may be.
I also suggest that you prepare a “sterile” html file with the META tag, and check whether this is working.
Regarding Linux – I really wouldn’t know. From wikipedia, IE is unofficially supported on Linux. I’d suggest trying on a windows machine first and checking it out there. Maybe the problem is on Linux IEs.
Mohammed
02/06/2011 at 18:04
Had similar issue with HTML5 site disappearing content in IE9
using the code below i was able to force IE9 to go in to IE8 compatibility mode.
Thanks for the very helpful post and to Nicolai for tip about shutting down IE.
Shahid
22/08/2011 at 06:54
Where is the code?
Andrew Macpherson
28/06/2011 at 13:47
Thanks for the tip, Evolpin.
I also ran into the “HTML1115: X-UA-Compatible META tag (‘IE=EmulateIE8′) ignored because document mode is already finalized” message in the IE9 dev tools console.
Moving my X-UA-Compatible meta element to the start of solved the problem for me, and hte console instead reports “HTML1113: Document mode restart from IE9 Standards to IE8 Standards “.
Andrew Macpherson
28/06/2011 at 13:52
I’ve discovered that this is indeed documented by Microsoft…
http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
“The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.”
Acidmartin also covers this in one of his blog posts…
http://acidmartin.wordpress.com/2009/03/21/using-the-ie8-x-ua-compatibility-meta-tag/
“Add the following meta-tag in the head section of your webpage above any linked files (i.e, above … and … tags)”
Ian Rogerson
17/04/2012 at 13:53
I found that when either doing this through the tag directly in the ASP page or adding it programmatically it didn’t work because ASP.NET got there first and added other references between and my meta data.
To fix this put the code into Page_Prerender() rather than OnInit() – it should then become the first item after
Deepak Kataria
24/08/2011 at 09:02
i had similar problem .i cannot access proper pdf loader bar in my websites
Mark Iliff (@markiliff)
30/08/2011 at 13:00
I came behind, I learned, I thanked…
Put the meta at the top. Aha! This really helped. Thank you.
µ
Mufaddal.
12/09/2011 at 19:32
Thanks for the article. Very helpful.
“The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.” from the link (http://msdn.microsoft.com/en-us/library/cc288325%28v=vs.85%29.aspx) mentioned in the article above.
itzik horesh
09/10/2011 at 11:36
problem consist if i use the page in an iframe within facebook
ie9 doesn’t seem to interpret the metatag….
any suggestion…
maybe leave a mark that says something like:
switch to compat… view yourself or even better ->
upgrade to another browser until microsoft cleans up there shit
dcs
07/11/2011 at 18:22
Here’s how to modify web.config for IIS7 to make this change (the instructions given above for .htaccess won’t work for web.config which is XML-based):
http://blogs.msdn.com/b/deviations/archive/2009/05/07/how-to-enable-ie-8-compatibility-view-for-your-whole-web-site-or-for-specific-web-site-directories.aspx
You can change this:
to this:
in order to force emulation of IE8 with IE9.
Hope this helps.
markrod420
23/12/2011 at 21:51
How can i force IE9 to just run in regular IE9 mode?
evolpin
24/12/2011 at 10:32
You can consult with the following: http://msdn.microsoft.com/en-us/library/ms533876%28v=vs.85%29.aspx.
kumar rahul
16/12/2011 at 11:39
thanks
eric
05/01/2012 at 18:19
Reza Qorbani – Your solution worked. Thanks!
I had an HTML5 video solution loading iFrames using FloatBox. Worked terrifically in all browsers except IE9 – and the metatag trick did not work. But your HTACCESS trick worked. Now IE9 thinks it’s IE8 and uses the flash video loading mp4 inside the iFrame in Floatbox and it works.
Happy New Year!
Deborah
17/01/2012 at 00:33
Thank you!! I couldn’t figure out why ie wasn’t rendering in standards! I might have struggled with this for hours.
Because I couldn’t move the meta tags to be first, because of our content management system, I found that changing the doctype from the descriptive string to “” forced the browsers to recognize my conditional tags when they were farther down in the head. Hope this might help someone too.
Thanks again!!
Deborah
17/01/2012 at 00:34
oh dear it stripped out my doctype. I changed it to ” (bracket) !DOCTYPE html (bracket) “. :]
Kimmo
23/01/2012 at 16:33
I had a XHTML Strict doctype, and even though I had the tag on the top, it didn’t work.
… I noticed that there was another meta a couple of lines below the IE=9 line that self-closed with an “>” and not “/>”. Once I fixed that, everything works again.
Sunny
02/02/2012 at 07:42
I have a Problem in WordPress in IE9. Text is not showing which is in Head tag. Do u hv any suggestion what i do so i can show it in IE9.
computersplus
12/02/2012 at 14:03
Thank you so much! This was driving me crazy and I don’t have time to try and rebuild the site at the moment.
kumar
15/02/2012 at 18:43
Thanks Evolpin,
“It seems like the X-UA-Compatible tag has to be the first tag in the section”, this really helped in fixing the problem I had.
I tried adding meta tag and it didn’t work for me because I did not know until I got to this forum.
Thanks again!
mikedatiu
27/02/2012 at 19:20
X-UA-Compatible meta tag first in head
properly self-closed tags (thanks Kimmo)
conditional comment wrapping html5 shiv for IE<9 (following meta above)
did not work.
"Any conditional comment in causes emulate modes to not work” (Rich Apodaca http://stackoverflow.com/questions/3413629)
the .htaccess solution (thanks Reza) is the only thing that fixed this.
(which also removes the need to use the meta tag)
mahad
03/03/2012 at 09:57
hi,
i’m facing a problem that is i have made a website and i used marque in it so the problem is that when i open it on google chrome the marque is not running can any one help me???
and 2nd thing is that when we make a website it show in mozila in right way but not in google teel me abt it
integweb
05/03/2012 at 15:31
This was very helpful, thanks. In contrast to some of the comments above, I found that the .htaccess change did not work and the meta tag (properly positioned) worked a treat.
Doraemon Z
21/03/2012 at 03:05
Thank you. You saved my sanity.
jak
10/04/2012 at 06:54
Thank you for these infos. i was looking for easy solution in order to avoid websites problems with ie nine.
Saved my time 🙂
Ben Dando
02/05/2012 at 23:22
Only worked from me when Meta-Tag was first entry in header (i.e. above css style sheet links and other java script sources ect…), not just first meta-tag entry. Thanks for the help though, much appreciated!
gina
09/05/2012 at 15:57
I put both of these codes in my headers. I use windows 8 consumer preview.
Roberto Castillo
30/05/2012 at 16:34
Really, really thank you very much, i solved my problems that i have with Magento in IE9.
Greetings.
janusmann22
14/07/2012 at 13:08
great solution with the .htaccess method. Worked like a champ – and saved a WHOLE lot of recoding!
simon
09/08/2012 at 01:48
thank you Reza. works like a charm
Roger
15/08/2012 at 16:13
Brilliant, having looked at around twenty posts, they were all suggesting changing the doctype, adding the code below the title, below the doctype, above the doctype, etc. Your is the first that actually works, thanks again.
RocketTendon
06/09/2012 at 23:23
Thanks a ton!
Rich
19/11/2012 at 01:33
meta tag worked for me, thank you.
Abderrazak BOUADMA
29/11/2012 at 18:43
adding the Header within httpd.conf also works for me.
It’s said that the .htaccess should reduces the Apache server performance
Beryl Lubow
18/01/2013 at 20:30
hi there, in some cases when I first visit this webpage I get automatically redirected to another page which would seem very odd. You might want to examine at why this is happening! Thanks
rina kumari
02/07/2013 at 07:45
my application in not open in mozila fire fox and google chrome.
Vinayak
10/09/2013 at 13:25
Please help me……
where to add this
BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support
in web.config file.
Heather
08/11/2013 at 17:49
I really want to know the reason you titled this
particular blog, “IE9, compatibility mode and the META tag | I Came, I Learned,
I Blogged”. No matter what I loved the blog!
I appreciate it,Celsa
Jyothsna Mutharaju
18/12/2013 at 08:52
I have the meta tag with content=”IE=EmulateIE7″. I am using IE9 thought the document mode is IE7 standard the browser mode is IE9. Unless I add my site to compatibility list or change browser mode from IE9 to IE9 compatibility view, my page does not come up well. buttons disappear. how do i force IE9 compatibility view in browser mode through code?
Alex Schmoe
05/02/2014 at 00:53
Another caveat for confused users, if you are using any conditional code like:
<!–
any “X-UA-Compatible” meta tag will be completely ignored… probably not surprising, but took me a while to find.