Bad value X-UA-Compatible for attribute http-equiv on element meta

Question

I have used the same meta that HTML5 Boilerplate is using, and the W3C HTML validator complains:

Bad value X-UA-Compatible for attribute

Answer 1

One possible solution is to implement a fix server-side in the header, as suggested in this nice write-up by Aaron Layton. (All credit should go to him, and I'll paraphrase rather than plagiarize...)

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

"When Internet Explorer comes across this line it will change the engine that is being used to first Chrome Frame, if the plugin is installed, and then to Edge (the highest supported document mode of the browser)."

Steps:

• Fix the page validation – This is achieved by simply removing the tag
• Rendering speed – Instead of waiting for the browser to see the tag and then change modes we will send the correct mode upfront as a response header
• Make sure that we only show the fix for Internet Explorer – We will just use some server side browser detection and only send it to IE

To add the header in PHP we can just add this to our page:

if (isset($_SERVER['HTTP_USER_AGENT']) &&
    (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== false))
        header('X-UA-Compatible: IE=edge,chrome=1');

Or you could add it to your .htaccess file like so:

<FilesMatch "\.(htm|html|php)$">
    <IfModule mod_headers.c>
        BrowserMatch MSIE ie
        Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    </IfModule>
</FilesMatch>

Link to original article, check comments for possible caveats. Also includes an implementation for C#.

Fix Bad value X-UA-Compatible once and for all

Hope this helps!

Answer 2

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

See this article for a possible fix