Internet Explorer 8: The X-UA-Compatible meta element and conditional comments

I woke up this morning to discover that Paul Irish had left a comment on one of my GitHub commits:

A user reported that this actually didnt work.. the ie=edge never jumped ie8 into standards mode..

did you see it succeed?

Hmm… this didn’t sound good. The error in question was on our HTML5 template for The Knot. We had wrapped the X-UA-compatible meta element with an IE conditional comment. I don’t remember exactly why we did this, but I think it had something to do with HTML validation.

Now, I know that HTML validation doesn’t matter (see also “The value of HTML validation”), but I do like using it as a lint tool (and yes, I prefer to just see a green favicon in the title bar). However, I also understand that pages don’t have to validate in the wild and I had never actually tested wrapping the X-UA-Compatible meta element with a conditional comment. I just assumed it would work, because, well, why shouldn’t it?

Damn. Once again, I learn the value of assumptions. It turns out that the way it’s coded doesn’t work. IE8 completely ignores the X-UA-Compatible meta element. Since I recently read about conditional comments blocking downloads, I was curious if this had anything to do with it and if the solution I had settled on for that problem would also help with this one. Voilà!

Since the download blocking also affects conditional comments around the body element and I wanted to avoid putting an empty conditional comment in the head, I moved the conditional comments to the html element. This solution also causes the conditional X-UA-Compatible meta element to be seen by IE!

UPDATE: There is one problem with this technique: it breaks Google Chrome Frame. Chrome Frame ignores IE conditional comments, so it never gets invoked. If you want your page to work with Chrome Frame and you want it to validate, send an HTTP header. If you can’t set the header, don’t wrap the meta element with conditional comments. Besides, validation doesn’t matter anyway, ;).

<!--[if lte IE 6 ]><html lang="en-us" class="ie ie6"><![endif]--> 
<!--[if IE 7 ]><html lang="en-us" class="ie ie7"><![endif]--> 
<!--[if IE 8 ]><html lang="en-us" class="ie ie8"><![endif]--> 
<!--[if !IE]>--><html lang="en-us"><!--<![endif]-->
<head>
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->
</head>
</body>
</body>
</html>

Tests

  1. IE=7. Works!
  2. IE=edge. Works!
  3. IE=edge wrapped in conditional comment. Does not work!
  4. IE=edge wrapped in conditional comment with conditional comments around the html element. Works!

7 thoughts on “Internet Explorer 8: The X-UA-Compatible meta element and conditional comments

  1. Hahah wow.
    If what you’ve got here is correct than this is a big win.. We’d get:

    * the IE classes
    * no blocking behavior
    * validating html5
    * IE kicked into edge standards

    That’s enormous! I’m gonna do some tests myself to verify but if this is the case then I think a lotta folks will be happy. :)

  2. @Bertil Good point – you would want to add something like the following to catch newer versions of IE:
    <!--[if gte IE 9 ]><html lang="en-us" class="ie ie9"><![endif]-->

    @Jeffery, @Paul Anyone doing extensive testing of this approach? Afraid I don’t have a working install of IE9 at the moment.

  3. Catch 22: a condition comment can depend upon the emulated browser version, yet the emulated browser version depends upon the X-UA-Compatible definition inside the conditional comment.

    Define the UA IE=7 inside an IE>=8 conditional comment and the page should enter a quantum superposition state!

  4. it is also

    <!–[if IE]><![endif]–>
    <!DOCTYPE html>
    <html lang="de">
    <head>

    <title></title>
    <!–[if gte IE 8]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><![endif]–>

    Greetings Werner

Leave a Reply