RSS

IE9, compatibility mode and the META tag

25 Feb

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.

About these ads
 
49 Comments

Posted by on 25/02/2011 in Software Development

 

Tags: , , , , , , , ,

49 responses to “IE9, compatibility mode and the META tag

  1. 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”…

     
  2. 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.

     
  3. 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

       
  4. 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.

         
  5. 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?

       
  6. 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 “.

     
  7. 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

       
  8. Deepak Kataria

    24/08/2011 at 09:02

    i had similar problem .i cannot access proper pdf loader bar in my websites

     
  9. 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.

    µ

     
  10. 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.

     
  11. 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

     
  12. 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.

     
  13. kumar rahul

    16/12/2011 at 11:39

    thanks

     
  14. 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!

     
  15. 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!!

     
  16. Deborah

    17/01/2012 at 00:34

    oh dear it stripped out my doctype. I changed it to ” (bracket) !DOCTYPE html (bracket) “. :]

     
  17. 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.

     
  18. 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.

     
  19. 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.

     
  20. 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!

     
  21. 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)

     
  22. 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

     
  23. 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.

     
  24. Doraemon Z

    21/03/2012 at 03:05

    Thank you. You saved my sanity.

     
  25. 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 :-)

     
  26. 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!

     
  27. gina

    09/05/2012 at 15:57

    I put both of these codes in my headers. I use windows 8 consumer preview.

     
  28. 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.

     
  29. janusmann22

    14/07/2012 at 13:08

    great solution with the .htaccess method. Worked like a champ – and saved a WHOLE lot of recoding!

     
  30. simon

    09/08/2012 at 01:48

    thank you Reza. works like a charm

     
  31. 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.

     
  32. RocketTendon

    06/09/2012 at 23:23

    Thanks a ton!

     
  33. Rich

    19/11/2012 at 01:33

    meta tag worked for me, thank you.

     
  34. 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

     
  35. 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

     
  36. rina kumari

    02/07/2013 at 07:45

    my application in not open in mozila fire fox and google chrome.

     
  37. 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.

     
  38. 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

     
  39. 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?

     
  40. 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.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 65 other followers

%d bloggers like this: