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

Asked 7/1, 2013 at 15:9 Answered 31/12, 2016 at 16:57

111

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

Bad value X-UA-Compatible for attribute http-equiv on element meta.
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>

What is wrong with this meta tag?

Lenette answered 7/1, 2013 at 15:9 Comment(1)

Here is a nice blog post about it (it was also the first search result I got): blog.yjl.im/2011/01/… – Refill 7/1, 2013 at 15:14

Either X-UA-Compatible is not "standard" HTML (FSVO "standard" that involves appearing on a publicly editable wiki page referenced by the specification) or the Validator isn't up to date with the current status of that wiki.

At the time of writing (20130326) X-UA-Compatible appears on the wiki page under a section that states: "The following proposed extensions do not yet conform to all the registration requirements in the HTML spec and are therefore not yet allowed in valid documents." So the validator is correct to reject this value.

Octad answered 7/1, 2013 at 15:14 Comment(7)

Wrong wiki page. The one you link to is for <meta name= .... For <meta http-equiv=... the page is wiki.whatwg.org/wiki/PragmaExtensions – Onitaonlooker 7/1, 2013 at 15:28

The correct wiki page does contain X-UA-Compatible, so the alternative “the Validator isn't up to date” applies. Even validator.nu (which has been said to be more up to date in general) is out of date in this respect. – Timotheus 7/1, 2013 at 15:34

Thanks for the corrections. I hadn't realised that the values for meta attributes were split across two pages. – Octad 7/1, 2013 at 15:37

See my answer for an example of how to patch the validator to support X-UA-Compatible. https://mcmap.net/q/194664/-bad-value-x-ua-compatible-for-attribute-http-equiv-on-element-meta – Souffle 10/1, 2014 at 15:24

so how can i fix the problem from w3c validator..may i remove the tag? – Replace 3/2, 2014 at 10:0

@Nikhilkrishnan You can remove the tag if your server is setting that http header and sending it to clients (which at the time of this writing is included in the .htaccess file included with HTML5 Boilerplate, provided that mod_headers is enabled in your Apache config). – Etiology 9/4, 2014 at 15:54

The situation has changed. The wiki page now lists it as proposed but invalid. On the other hand, the validator has now been changed to accept specifically <meta http-equiv="X-UA-Compatible" content="IE=edge"> but no other value; this is inconsistent with the HTML5 spec (and HTML 5.1 draft). – Timotheus 23/1, 2015 at 15:4

If you're looking to make it technically valid (everyone loves to see the green favicon) w/o effecting any functionality, you should be able to just wrap it in a "if IE" tag.

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->

Accounting answered 24/4, 2013 at 5:38 Comment(3)

This effectively disables your Chrome Frame support as Chrome Frame ignores IE conditional comments, see jeffreybarke.net/2010/08/… – Nalchik 17/6, 2013 at 11:34

@JasperMoelker: probably worth mentioning that the article you've provided the link to actually contains a workaround for Chrome Frame as well which is fantastic: Validation + Chrome Frame support! – Crypto 16/7, 2013 at 6:58

No no no, this breaks the X-UA-Compatible. xn--mlform-iua.no/blog/… – Sp 20/3, 2014 at 15:59

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!

Elissaelita answered 11/11, 2013 at 11:10 Comment(6)

At the time of this writing, this solution is implemented in the HTML5BP .htaccess file. So, provided that your Apache server has mod_headers enabled, you'd be safe to remove the <meta> from the html file. – Etiology 9/4, 2014 at 15:56

If you're using Spring MVC, like me, then it's still pretty easy to do. You're looking for: response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");, but here is a full github gist. – Tabling 20/4, 2014 at 7:45

@PatrickJamesMcDougle I had to enable both the headers and setenvif mods on my Apache server to get this to work. – Maulstick 13/5, 2014 at 0:37

Does it matter where this is added? Should it be the very first thing? – Labial 29/8, 2014 at 1:20

W3C HTML validator maintainer here. If you put "chrome=1" into the value, the solution in this answer is not going to work any more, because we’ve since added a check for the header as well (along with the check of the meta element), and per the HTML spec, in either place (the meta element or the header) the only allowed value is "IE=Edge". – Hepzi 18/4, 2015 at 1:22

Another issue with using headers is that you can't use it with a "user agent agnostic" reverse cache. – Isopod 2/7, 2015 at 9:42

.. may this be a good answer?

Set HTTP Header with PHP:

http://www.joshuawinn.com/fix-html5-validator-error-bad-value-x-ua-compatible-for-attribute-http-equiv-on-element-meta/

This is not my own work but I hope it is useful to others too.

Observation answered 8/9, 2013 at 19:58 Comment(1)

Note that link-only answers are discouraged (links tend to get stale over time). Please consider editing your answer and adding a synopsis here. – Preceptory 8/9, 2013 at 20:25

If you download/build the validator src code, you can add support yourself.

Add the following to a file such as html5-meta-X-UA-Compatible.rnc) Then include it in html5full.rnc.

I did this and it works nicely for validating.

meta.http-equiv.X-UA-Compatible.elem =
  element meta { meta.inner & meta.http-equiv.X-UA-Compatible.attrs }
  meta.http-equiv.X-UA-Compatible.attrs =
    ( common.attrs.basic
      & common.attrs.i18n
      & common.attrs.present
      & common.attrs.other
      & meta.http-equiv.attrs.http-equiv.X-UA-Compatible
      & meta.http-equiv.attrs.content.X-UA-Compatible
      & ( common.attrs.aria.role.presentation
        | common.attrs.aria.role.menuitem
        )?
    )
    meta.http-equiv.attrs.http-equiv.X-UA-Compatible = attribute http-equiv {
      xsd:string {
        pattern = "X-UA-Compatible"
      }
    }
    meta.http-equiv.attrs.content.X-UA-Compatible = attribute content {
      xsd:string {
        pattern = "IE=((edge)|(EmulateIE(7|8|9|10))|7|8|9|10|11)(,chrome=(1|0))?"
      }
    }

common.elem.metadata |= meta.http-equiv.X-UA-Compatible.elem

Souffle answered 10/1, 2014 at 15:23 Comment(0)

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

See this article for a possible fix

Uchish answered 12/2, 2014 at 15:34 Comment(1)

Please describe some your thinking in your answer. – Lifelike 12/2, 2014 at 15:54

Please remove ,chrome=1 from meta tag it will working fine. With validator:

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

Kashmir answered 31/12, 2016 at 16:57 Comment(0)

-1

I had the same issue and adding and to surround that entire line remedied the situation.

<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->

Jaunitajaunt answered 28/1, 2014 at 21:30 Comment(3)

Do anybody know why is downvoted? It actually makes validator work properly. – Sarcoid 3/6, 2014 at 10:31

Probably because it doesn't actually achieve anything. 1. Conditional comments don't work in IE10 and above. 2. X-UA-Compatible is for making newer browsers emulate older ones. So what this line effectively says is: 1. IE 10 & 11, render using default mode (since they don't parse conditional comments anymore) 2. IE 9, render as IE 9 (ie, its default mode in most cases). 3. IE < 9, render using default mode (since they can't emulate a browser that is newer than they are) – Judaic 16/6, 2014 at 5:40

I'll also add that it makes the validator work 'properly' because it's inside a comment (thus the validator ignores it). – Judaic 16/6, 2014 at 5:47

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags