Using the IE8 X-UA Compatibility Meta Tag Properly

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

Internet Explorer 8 is out, with a couple of rendering modes, that will take time to handle. As you know, IE8 renders pages in standards compliance mode by default, and the X-UA compatibility tag has been a good idea of Microsoft, as it gives a chance to developers who have not optimized their websites for IE8 to put things to work with less effort.

Did you try it already? If it is something new to you, it works like that:

1. Add the following meta-tag in the head section of your webpage above any linked files (i.e, above <link>…</link> and <script>…</script> tags)

<meta http-equiv="X-UA-Compatible" content="IE=7" />

If the tag is below link or script tags, the fix will not work.

2. Reload the page, and the meta tag will force IE8 to use the rendering engine of IE7, and your webpages will look as they did before, until you find a solution for the issues you have noticed when IE8 was released.

If your pages behave as expected under IE8 then you should use the IE8 meta tag.  This will ensure that your code will continue to run properly after the next browser upgrade:

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

In summary, the compatibility UA-X meta tag is a good and legal trick to be comfort with your visitors.

Do not hesitate using it.

More Cool Stuff

14 comments

  1. Thanks for mentioning that the tag only works if placed before link or script tags. This was driving me crazy!

    IE8 may claim that it is being more “standards compliant”, but Firefox and Safari had no problem with my HTML. IE8 rendered it inconsistently, with different results each time I refreshed! IE7 mode is bad enough, but at least its determinant!

    MS has no idea how to make a good browser. I wish they would stop trying.

  2. Thanks so much, I just used it on a website for a store called pickled clothing to fix a problem with nextgen gallery.

  3. If you are having any issues, try placing this tag directly below the tag. I have found multiple instances where not having it as the first element in the head will void this out. Especially in Sharepoint pages, where lots of additional tags/data is generated and stored in the head.

  4. Martin – I was wondering if you could help me. I am using the MistyLook theme (hosted by WP – i did not dwload WP – i don’t have nearly the tech capabilities for that). I have been using a widget to change the background wallpaper and tweaking the CSS with fonts and things and I love it.

    The problem is, people using IE8 seem not to be able to see my text on my body page, because to them, it is transparent, instead of white. I am on Firefox/Mozilla, so I have no problems at all. Obviously, I would like everybody to be able to read my blog with no problems as well. I wrote to the theme developer, but he said it was a WP problem, but perhaps it’s not?

    I wonder if there’s an easy fix for this within the CSS. I’m at my wit’s end. I am just a beginner at this code stuff. Here is my blog: http://www.eviltwit.wordpress.com

    Can you help me?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>