HTML5: Set X-UA-Compatible rendering mode validating the document

A  feature added to Internet Explorer 8 (IE8 ), is the ability to change the browser rendering  mode by adding a meta tag <meta http-equiv="X-UA-Compatible" content="edge" /> inside the document header tag.

This is a great feature that allows you to display websites properly, but there is one small problem, adding the tag will break the W3C validation of the website.

One way to solve this is by removing the meta tag and setting the information in the server  response header. Add the following code to your .htaccess file. Modify the compatibility mode to fit your needs.

#add IE rendering mode
<IfModule headers_module>
BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1"
</IfModule>

Now, the page will validate and render just the way you want it.

 

X-UA-Compatible  values

Value

Description

IE=5 Renders content in IE5 standards mode (aka Quirks mode)
IE=7 Renders content IE7’s standards mode ignoring the <!DOCTYPE> directive.
IE=EmulateIE7 Use the <!DOCTYPE> directive to determine how to render the content
IE=8 Renders content in IE8 standards mode
IE=edge Renders content in highest mode available… equal to IE=8  if the page is browsed with IE8.
IE=EmulateIE8 Display Standards DOCTYPEs in IE8 Standards mode; Display Quirks DOCTYPEs in Quirks mode. Use this tag to override compatibility view on client machines and force Standards to IE8 Standards.
chrome=1 Use Google Chrome’s rendering engine inside IE, if the user has the plugin installed