Valor inválido X-UA-Compatível para o atributo http-equiv no elemento meta

110

Usei o mesmo metaque o HTML5 Boilerplate está usando, e o validador HTML W3C reclama:

Valor inválido X-UA-Compatível para o atributo http-equiv no elemento meta.

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

O que há de errado com essa metatag?

Randomblue
fonte
6
Aqui está uma boa postagem no blog sobre isso (também foi o primeiro resultado de pesquisa que recebi): blog.yjl.im/2011/01/…
ComFreek

Respostas:

67

O X-UA-Compatible não é um HTML "padrão" (FSVO "padrão" que envolve aparecer em uma página wiki publicamente editável referenciada pela especificação) ou o Validador não está atualizado com o status atual desse wiki.

No momento da escrita (20130326) Compatível com X-UA aparece na página wiki em uma seção que afirma: "As seguintes extensões propostas ainda não estão em conformidade com todos os requisitos de registro na especificação HTML e, portanto, ainda não são permitidas em validade documentos. " Portanto, o validador está correto em rejeitar este valor.

Quentin
fonte
8
Página wiki errada. O que você vincula é para <meta name= .... Para <meta http-equiv=...a página é wiki.whatwg.org/wiki/PragmaExtensions
Alohci
6
A página wiki correta contém X-UA-Compatible, então a alternativa “o Validador não está atualizado” se aplica. Mesmo validator.nu (que foi considerado mais atualizado em geral) está desatualizado a esse respeito.
Jukka K. Korpela
Obrigado pelas correções. Não tinha percebido que os valores dos metaatributos estavam divididos em duas páginas.
Quentin
1
Veja minha resposta para um exemplo de como corrigir o validador para oferecer suporte X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker
então, como posso corrigir o problema do validador w3c ... posso remover a tag?
Krish
42

Se você está procurando torná-lo tecnicamente válido (todos adoram ver o favicon verde) sem afetar qualquer funcionalidade, você deve ser capaz de envolvê-lo em uma tag "if IE".

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
Matthew Haeck
fonte
22
Isso efetivamente desativa o suporte do Chrome Frame, pois o Chrome Frame ignora os comentários condicionais do IE, consulte jeffreybarke.net/2010/08/…
Jasper Moelker
5
@JasperMoelker: provavelmente vale a pena mencionar que o artigo para o qual você forneceu o link contém também uma solução alternativa para o Chrome Frame, o que é fantástico: Validação + suporte para Chrome Frame!
Lucas
5
Não, não, isso quebra o Compatível com X-UA. xn--mlform-iua.no/blog/…
brentonstrine
30

Uma solução possível é implementar uma correção no lado do servidor no cabeçalho, conforme sugerido neste belo artigo de Aaron Layton. (Todo o crédito deve ir para ele, e vou parafrasear em vez de plagiar ...)

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

"Quando o Internet Explorer encontrar esta linha, ele mudará o mecanismo que está sendo usado primeiro para o Chrome Frame, se o plug-in estiver instalado, e depois para o Edge (o modo de documento mais compatível do navegador)."

Passos :

  • Corrija a validação da página - Isso é feito simplesmente removendo a tag
  • Velocidade de renderização - em vez de esperar que o navegador veja a tag e, em seguida, alterar os modos, enviaremos o modo correto antecipadamente como um cabeçalho de resposta
  • Certifique-se de mostrar apenas a correção para o Internet Explorer - usaremos apenas alguma detecção de navegador do lado do servidor e apenas enviaremos para o IE

Para adicionar o cabeçalho em PHP, podemos apenas adicioná-lo à nossa página:

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


Ou você pode adicioná-lo ao seu arquivo .htaccess assim:

<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 para o artigo original, verifique os comentários para possíveis advertências. Também inclui uma implementação para C #.

Corrigir valor ruim compatível com X-UA de uma vez por todas

Espero que isto ajude!

D.Alexander
fonte
1
No momento em que este artigo foi escrito, essa solução estava implementada no arquivo HTML5BP .htaccess. Portanto, desde que seu servidor Apache tenha mod_headers habilitado, você estará seguro para remover o <meta>do arquivo html.
Patrick James McDougle,
Se você estiver usando Spring MVC, como eu, ainda é muito fácil de fazer. Você está procurando por :,response.addHeader("X-UA-Compatible", "IE=edge,chrome=1"); mas aqui está uma essência completa do github .
Paul Nelson Baker de
1
@PatrickJamesMcDougle Tive que habilitar os mods headerse setenvifno meu servidor Apache para fazer isso funcionar.
iglvzx
Faz diferença onde isso é adicionado? Deve ser a primeira coisa?
Staysee
1
Mantenedor do validador W3C HTML aqui. Se você colocar "chrome = 1" no valor, a solução nesta resposta não funcionará mais, porque nós também adicionamos uma verificação para o cabeçalho (junto com a verificação do elemento meta), e de acordo com a especificação HTML, em qualquer lugar (o elemento meta ou o cabeçalho), o único valor permitido é "IE = Edge".
sideshowbarker
1

Se você baixar / construir o código src do validador, você mesmo pode adicionar suporte.

Adicione o seguinte a um arquivo, como html5-meta-X-UA-Compatible.rnc) Em seguida, inclua-o emhtml5full.rnc .

Eu fiz isso e funciona bem para validar.

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
darcyparker
fonte
0

Remova ,chrome=1da metatag, ela funcionará bem. Com validador:

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

Eu tive o mesmo problema e adicionar e cercar aquela linha inteira remediou a situação.

<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
cinemafunk
fonte
1
Alguém sabe por que foi rejeitado? Na verdade, faz o validador funcionar corretamente.
Maciej Paprocki
2
Provavelmente porque não alcança nada. 1. Comentários condicionais não funcionam no IE10 e superior. 2. Compatível com X-UA é para fazer os navegadores mais novos emularem os mais antigos. Portanto, o que esta linha efetivamente diz é: 1. IE 10 e 11, renderize usando o modo padrão (já que eles não analisam mais comentários condicionais) 2. IE 9, renderize como IE 9 (ou seja, seu modo padrão na maioria dos casos). 3. IE <9, renderize usando o modo padrão (já que eles não podem emular um navegador mais recente do que eles)
aleayr
Também acrescentarei que faz com que o validador funcione 'corretamente' porque está dentro de um comentário (portanto, o validador o ignora).
aleayr de