X-UA-Compatible and HTML5

When Microsoft released IE8, they added a way of ensuring which rendering mode the browser uses. You do it by setting a non-standard header, either with a meta element in your HTML or by configuring your web server to send the header as part of the HTTP response. A lot more details can be found in Defining Document Compatibility (that URL looks far from stable, so don’t be surprised if it doesn’t work).

Always making sure to use a doctype that triggers full standards mode I’ve never encountered a need to use this myself, but I encountered it recently on a couple of sites. What I noticed was that using the following meta element to set the compatibility header will cause a validation error (Bad value “X-UA-Compatible” for attribute “http-equiv” on element “meta”) in HTML5:

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

Of course you can do what the “cool” kids do nowadays and simply ignore the error, but I suggest doing things the right way instead. Get the meta element out of your markup and and send the header over HTTP instead.

On Apache, add this to your root .htaccess file:

Header set X-UA-Compatible "IE=edge"

You can set it in other ways too. The mod_headers documentation has the info you need. If you have to use IIS, Implementing the META Switch on IIS may be what you need.

But before doing any of the above, consider whether you really need that header at all.

Posted on March 31, 2011 in Web Standards, HTML 5, Browsers