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]-->
	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge" /><![endif]-->


  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!

Leave a Reply