CSS (IE8/IE9/IE10): Meta tag to disable compatibility view

84 comments

I had some trouble with CSS on Internet Explorer 8 the other day and wondered why the hell it wasn't working.
After hours of frustration, I disabled compatibility mode by clicking on "Tools" > "Compatibility View" and it just worked.

image
But I had to disable this for the whole site, without having to teach each user about it. Luckily, there is a meta tag for it!

Add the following tag into the head section of your page and IE will use the specified rendering mode.

<meta http-equiv="X-UA-Compatible" content="IE=8" />
Unsure which version of Internet Explorer supports this, but I know IE8 and IE9 honours this setting.

*update 12/8/2011*

OK, this caused a bit of confusion to me but I figured out why rounded corners (CSS border-radius) wasn't working on IE9.

I shot myself in the foot because I've set the "IE=8" compatibility mode, IE9 will not render rounded borders because IE8 doesn't actually support it.

After reading a post on StackOverflow, I looked up the docs for document compatibility and found a fix. Set the order of compatibility in this format:

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

Now it'll try IE9 mode first, IE8, then IE7. You can even set IE=EDGE so it'll use the highest mode possible.

*update 21/8/2013*

haha a little over 2 years since the last update, I ran into another issue with this.

IE9 dev tools was spitting out this error:

X-UA-Compatible META tag ignored because document mode is already finalized.

The hell does that mean?

Well apparently it only works if we have it as the VERY FIRST tag in the <head> element, with the exception of <title>. Moving your compatibility meta tag up will fix it.

[ Source ]

[ Fix: IE9 fieldset rounded corners, Defining Document Compatibility, HTML1115: X-UA-Compatible META tag ('IE=9, IE=8, chrome=1') ignored because document mode is already finalized ]

84 comments:

  1. Just what I had been looking for, perfect! Many thanks!

    ReplyDelete
  2. thanks, works like a charm.

    ReplyDelete
  3. You. Are. Awesome.
    This is exactly what I needed and as posted by the others, it works perfectly.
    Thank you!

    ReplyDelete
  4. perfect, thank you!

    ReplyDelete
  5. How do I tell my website NOT to render in compatibility mode under any circumstances? I did a website and some people have their browsers to view all webpages in compatibility mode. I don't want them to do that as it messes stuff up. I want to enforce the webpage to render as normal HTML without any compatibility stuff. But it must be enforced to override whatever the user's browser wants to do.

    ReplyDelete
  6. When you add this little tag into your HTML, the compatibility mode option will be disabled for your web page.

    That means whatever they select will be ignored and it will NOT use compatibility mode.

    ReplyDelete
  7. Perfect. I hope this does not sound like a silly question. If for some reason a viewer is having problems with internet explorer 9 and the meta tag code still does not work, does that mean that the person has possibly internet explorer 7, 6? and would I need to adjust the code? I guess what I am trying to say is if a person has to use this code it will revert back to the previous internet explorer they had prior. is it possible a person upgraded from 6,7 if so what that code still solve my problem? Thank.

    ReplyDelete
  8. No, if this tag is added in then it will force IE9 to use the IE9 engine.

    Compatibility mode makes your IE9 work with the broken IE6/7/8 modes, which makes IE9 use the old broken engines to render IE specific stuff (which most designers on the web are trying to get rid of)

    If the user is using IE8 and the tag is there, it will force the browser to use the IE8 engine. Likewise with IE7.

    IE6 does not have a compatibility mode to disable and will render most sites as best as it can.

    ReplyDelete
  9. Just what I needed to fix a strange font rendering issue with IE8 and Century Gothic, thanks!

    ReplyDelete
  10. Really

    Thanks!
    Thanks!!
    Thanks!!!
    Thanks!!!!
    Thanks!!!!!

    ReplyDelete
  11. thank, works like a charm.

    ReplyDelete
  12. @Harvest Temple Church and anyone else having issues with IE9 and rounded borders.

    I've updated this post to rectify an issue with IE9 rendering with the IE8 engine (which is wrong).

    ReplyDelete
  13. This saved me HOURS! Thank you!

    ReplyDelete
  14. YOU SAVED ME DAYS!!!

    Awesome thanks!

    And love the hair.

    ReplyDelete
  15. ...meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"...
    It s works great!!!

    ReplyDelete
  16. I reckon you staved off a heart attack, here!

    Thanks hugely.

    CP/M

    ReplyDelete
  17. If the site is hosted on what Microsoft considers to be "intranet" the site will still be displayed in Compatibility View - no meta tag can override it and worse - the compatibility view icon is still gone. Only option is to uncheck the "Display intranet sites in compatibility view" checkbox in "tools - Compatibility View settings".

    ReplyDelete
    Replies
    1. On my machine running IE9 on Windows 7, intranet sites are no longer displayed in compatibility view if I include the meta tag. It doesn't matter if the intranet compatibility checkbox is checked or not.

      Delete
    2. I had the same problem on IE9, but solved the problem like this:





      Hope it helps!

      Delete
    3. Somehow my code was disabled.

      Instead of IE=EDGE, use IE=EmulateIE8.

      That should do the trick. Lost days with this "#$="$

      Delete
  18. I really hate how they separate the intranet and internet zones

    ReplyDelete
  19. This is perfect! Thank you. I was very worried that all the work I put into making my company's new website would go south because of that stupid compatibility view. This little meta tag did the trick for me. Cheers and Happy Holidays.

    ReplyDelete
  20. You are awesome, this help us. IE8 compatibility was giving us hell.

    ReplyDelete
  21. Brilliant, thanks for this. Also noticed that tag will only work if it appears above other style or js declarations. e.g must be in the order

    title
    meta
    style

    ReplyDelete
  22. THANK YOU!!! This turned a 3-hour headache into a 5-minute solution! THANK YOU!!! :)

    ReplyDelete
  23. Thak you! Great help for me, that am just sarting to HTML5 my websites!

    ReplyDelete
  24. sheeeesh - you're a lifesaver. is there a tag that deletes ie8 altogether?

    ReplyDelete
  25. Make sure you put it at the top of the header tags. I put it after all the other ones (title, etc) and didn't work. Put it at the top and works!! picky! thanks! life saver!

    ReplyDelete
    Replies
    1. That is true, thank you!

      Delete
  26. Here it is on July 3, 2012 and your solution saved my butt. My client is so lame they find these errors because they forget to uncheck compatibility mode. Well, now they have no option. You rock and this is added to my agency's hack sheet! Thank you.

    ReplyDelete
    Replies
    1. haha yeah I agree, getting the client/user to disable stuff on their end to make your site work properly is a terrible idea.

      most people can't be bothered or don't know the option is there.

      Delete
  27. I don't know what to say, but your solution is one in a million...Very difficult to find it in any other forums..Thank you so much...Saving me days days and days...Good job!!

    ReplyDelete
  28. It works for me, but after i pasted the meta tag it shows me some in-ordered pages displayed

    ReplyDelete
  29. Dear Twig,
    I love you.
    And what others said upthread.
    Sincerely,
    Another Anonymous

    ReplyDelete
  30. You sir just saved me from raging on my computer! LOL

    ReplyDelete
  31. Just to let you know "IE=EDGE" does the trick without adding the versions of IE. It keeps it from being redundant.

    ReplyDelete
  32. Thanks so much - you saved me tons of time - knew what the problem was but had no idea how to fix it - also gave it to our agency hq and it is going into next template release

    ReplyDelete
  33. This comment has been removed by the author.

    ReplyDelete
  34. Sadly, this is not working anymore since the last update on our campus, so I just created conditional comments for lt IE9.

    ReplyDelete
  35. Dear Twig

    Altough this comaptibility view it's more than a silly feature, you saved my day here at out floating fortress office, so now I got more time to play Galaga.

    An Anonymous S.H.I.E.L.D employer

    ReplyDelete
  36. Thanks, just written a lot more clearly than where I was looking first.

    One thing I would mention though is that you need to put the meta tag before any link tags, otherwise IE will cheerfully ignore it (gives a warning in the console if you think to enable it).

    ReplyDelete
  37. good one.. thanks for sharing..

    ReplyDelete
  38. when running ie8 it still forces ie8 compat view for intranet sites. such a pain. Can't find a way around it

    ReplyDelete
  39. Note that Twig also appreciates "coffee" donations!!

    ReplyDelete
  40. Thanks man, your solution solve all my problems with IE9 and Twitter Bootstrap...Now website looks great on ie9...

    Best from Serbia...

    ReplyDelete
  41. Thank you so much!

    ReplyDelete
  42. Twig .... good stuff from everyone it seems but not me .... yet .... should the use of CSS affect this solution in any way? Because pressing the button is the only way I can get this to work - none of the methods here are working (sorreeeee)

    ReplyDelete
    Replies
    1. Hi EMC,

      Please make sure you're using it in the HEAD tag of your page, not the BODY tag.

      Delete
    2. Believe me sir Ive tried it EVERYWHERE ! It is being recognised (because the compatability button on the browser is no longer there but it doesnt force the save behaviour that pressing the button forces. I have a CSS file controlling the centering of a table on a simple page. In Frontpage preview the bottom TD tag (enclosed within a TR tag) contains a copyright message which sits perfectly on the underlying background image. In all browser versions, this behaves the same AFTER I have pressed the compatability view button .... but before I press this button the copyright message has slipped about 2-3 cm down OFF the background image. The very first 2 lines of my code have W3C 'DOCTYPE' and 'HTML' related declarations .... when I take these out, I have noticed that the problem is gone ... BUT the table in which all the content is placed is no longer centered on the page ... pulling hair out now to find the common ground in all this !!!

      Delete
    3. Sorry,I made a typo in that last post .... I meant to say that "it doesnt force the SAME behaviour that pressing the button forces"

      Delete
    4. Hey EMC,

      That's strange indeed. Well, it seems as though the tag IS working since the button is greyed out (as it's supposed to when the tag is specified).

      Since you mentioned that it works "when you press the button", check what compatibility mode it changes it to when you click it. Perhaps it's switching to an older version rather than off?

      The only thing I can think of now is that IE is not rendering the (valid) CSS the same way that the other browsers are.

      In this case, enable the tag (so the compatibility button is disabled) and fix the CSS (or add in IE specific CSS).

      Sorry, that's all I can really guess from this point in time :)

      Delete
  43. Spot on - no other solution like this found on the web.

    Thank you.

    ReplyDelete
  44. thanks, great solution :)

    ReplyDelete
  45. Thanks!!! Great help for me. Your solution solve a old compatibility mode problems with IE8 and IE9 on my website.
    Thanks for sharing..




    ReplyDelete
  46. thank you so much,it is really helpful!!

    ReplyDelete
  47. Hi Twig,

    the solution provided by you is not working for me. When I check with other sites in IE(IE8), The compatibility view option is grayed out but when I open my site its not grayed out. In IE8 when I unchecked the compatibility view option, The page is displaying properly. when I check compatibility view, then whole page is breaking. The pop up which are in display none, even there getting visible.

    Please save me..

    ReplyDelete
  48. Help me to sort the below issue.

    By clicking the button in my webpage it will navigate to the previous page of my application

    The code in button event is below.
    HttpContext.Current.Response.Clear();
    //removed tag
    HttpContext.Current.Response.Write("htmlbodyscripthistory.go(-1);scriptbodyhtml");
    HttpContext.Current.Response.Flush();
    HttpContext.Current.Response.End();
    This works fine untill I have added the meta tag in my master page
    meta http-equiv="x-ua-compatible" content="ie=edge"
    After adding this the button event is not working as expected.

    ReplyDelete
    Replies
    1. That looks a bit like ASP.net (which I'm not familiar with) but if anything I'd say that JS/html is not correct.

      You should not have html/body within the body tag at all.

      Adding the UA-Compatible meta tag forces IE to adhere to standards better, which is probably why your script is breaking.

      Other than that, I'm not really sure what might be wrong.

      Delete
  49. I think I discovered a glitch in IE. By mistake I put your meta tag just above the head tag (outside the head tag) and I think it completely disabled the compat view option and icon. I like it if what I'm seeing is caused by my mistake. Not sure though...

    ReplyDelete
    Replies
    1. That's correct behaviour. It only allows you to set compatibility mode on sites that don't specify it.

      Delete
  50. Your profile pic is hysterical!

    ReplyDelete
  51. Thanks for updating your answer continuously, i wish more people would do that more often!

    ReplyDelete
    Replies
    1. You're welcome.

      It's not the easiest thing to do. Sometimes it's easier to just write up a new blog, but in this case it's a simple update :)

      Delete
  52. thanks, that helped!!!

    ReplyDelete
  53. hello, I am using IE11, and on some condition i want to render my specific page i.e. ABC.html with IE10 render, for that i use the meta tag string.But if the meta tag is already added on top of header of the page(in ABC.html) then that page render with IE10 render-er successfully,CAN this be possible that i can add dynamically the meta tag sting in ABC.html. and when that page load it render with IE10 render, thanks,

    ReplyDelete
    Replies
    1. Unlikely. The tag needs to be specified early on in the HTML before the rendering engine starts rendering any elements.

      Because of this, I suspect that it's not possible to change it as Javascript is run well after rendering is started.

      It's the nature of web dev. Choose an acceptable target browser range and stick with it. Otherwise force people to upgrade or spend a lifetime perfecting it for all browsers.

      Delete
  54. Yeah, you are quit right about this "Unlikely. The tag needs to be specified early on in the HTML before the rendering engine starts rendering any elements.

    Because of this, I suspect that it's not possible to change it as Javascript is run well after rendering is started."
    as on html pages rendering cycle the header first render then the JS block execute, so it is useless to add dynamically meta tag when already the render-er starts loading the page. BUT is there no way left i mean using jquery or any other api or perhaps before loading a page add the meta tag string then give request of loading that page. For the end solution i have maintain two versions of page one for IE11 without meta tag and one for IE10-render specific (having meta tag).but it is absurd i mean for how many pages u maintain 2 versions, can there be no other intelligent solution exists! u can give direction towards

    ReplyDelete
    Replies
    1. Hi Ip Ta,

      I already have given an alternate solution, "choose an acceptable target browser range and stick with it. Otherwise force people to upgrade or spend a lifetime perfecting it for all browsers".

      IE10 is 2 years old. It's successor IE11 was released one year ago. Comparing to the monthly or bi-monthly release schedules of Chrome and Firefox, that is ancient.

      This is the nature of web development. They need to either upgrade their browser or get left behind.

      Delete
    2. Forgot to mention, you don't have to support two versions of a site. You just need to find a single CSS fix that works for BOTH browsers.

      Delete
    3. Thanks but i am newbie in CSS world, just know about CSS for cosmetic effects.Can you give any snippet of code. that would be really helpful.

      Delete
    4. One more Q @twig i am facing all that problems b/c with IE11 i have to run an html page which have VBScript in it. for that (to run that page/vbscript in IE 11) i was thinking about this strategy to add the meta tag some how so that the vbscript will be run safely.could u give any suggestion about this one to run vbscript in IE11. b/c all i see is when the meta tag is added already in header tag & when that page loaded dynamically then the vbscript part will be run other wise i don't think so that u can add meta tag dynamically .

      Delete
    5. Hey Ip Ta,

      Sorry, I can't really help you there because I don't have much experience with vbscript in IE.

      Delete

Leave your thoughts ...
---
If you are having trouble with copy/pasting in comments, you need to sign in or click 'Preview'. For more information about this Firefox bug, see here.

 
Copyright © Twig's Tech Tips
Theme by BloggerThemes & TopWPThemes Sponsored by iBlogtoBlog