Valor incorrecto X-UA-Compatible para el atributo http-equiv en el elemento meta

110

He usado el mismo metaque usa HTML5 Boilerplate, y el validador de HTML W3C se queja:

Valor incorrecto X-UA-Compatible para el atributo http-equiv en el meta del elemento.

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

¿Qué le pasa a esta metaetiqueta?

Randomblue
fuente
6
Aquí hay una buena publicación de blog al respecto (también fue el primer resultado de búsqueda que obtuve): blog.yjl.im/2011/01/…
ComFreek

Respuestas:

67

O X-UA-Compatible no es HTML "estándar" (FSVO "estándar" que implica aparecer en una página wiki editable públicamente a la que hace referencia la especificación) o el Validador no está actualizado con el estado actual de esa wiki.

En el momento de escribir este artículo (20130326) X-UA-Compatible aparece en la página wiki en una sección que dice: "Las siguientes extensiones propuestas aún no cumplen con todos los requisitos de registro en la especificación HTML y, por lo tanto, aún no están permitidas en documentos." Entonces, el validador está en lo correcto al rechazar este valor.

Quentin
fuente
8
Página wiki incorrecta. El que enlaza es para <meta name= .... Para <meta http-equiv=...la página es wiki.whatwg.org/wiki/PragmaExtensions
Alohci
6
La página wiki correcta sí contiene X-UA-Compatible, por lo que se aplica la alternativa "el Validador no está actualizado". Incluso validator.nu (que se ha dicho que está más actualizado en general) está desactualizado a este respecto.
Jukka K. Korpela
Gracias por las correcciones. No me había dado cuenta de que los valores de los meta atributos se dividían en dos páginas.
Quentin
1
Vea mi respuesta para ver un ejemplo de cómo parchear el validador para admitir X-UA-Compatible. stackoverflow.com/a/21048010/1006963
darcyparker
Entonces, ¿cómo puedo solucionar el problema del validador w3c ... puedo eliminar la etiqueta?
Krish
42

Si está buscando que sea técnicamente válido (a todos les encanta ver el favicon verde) sin afectar ninguna funcionalidad, debería poder envolverlo en una etiqueta "if IE".

<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
Matthew Haeck
fuente
22
Esto deshabilita efectivamente su compatibilidad con Chrome Frame, ya que Chrome Frame ignora los comentarios condicionales de IE, consulte jeffreybarke.net/2010/08/…
Jasper Moelker
5
@JasperMoelker: probablemente valga la pena mencionar que el artículo al que proporcionó el enlace en realidad también contiene una solución alternativa para Chrome Frame, que es fantástica: ¡Validación + compatibilidad con Chrome Frame!
Lucas
5
No, no, no, esto rompe la compatibilidad con X-UA. xn--mlform-iua.no/blog/…
brentonstrine
30

Una posible solución es implementar una corrección del lado del servidor en el encabezado, como se sugiere en este bonito artículo de Aaron Layton. (Todo el crédito debe ser para él, y parafrasearé en lugar de plagiar ...)

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

"Cuando Internet Explorer se encuentra con esta línea, cambiará el motor que se está utilizando a Chrome Frame primero, si el complemento está instalado, y luego a Edge (el modo de documento más alto admitido del navegador)".

Pasos :

  • Corrija la validación de la página: esto se logra simplemente quitando la etiqueta
  • Velocidad de representación: en lugar de esperar a que el navegador vea la etiqueta y luego cambie los modos, enviaremos el modo correcto por adelantado como un encabezado de respuesta
  • Asegúrese de que solo mostramos la solución para Internet Explorer: solo usaremos alguna detección del navegador del lado del servidor y solo la enviaremos a IE

Para agregar el encabezado en PHP, podemos agregar esto a nuestra página:

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


O puede agregarlo a su archivo .htaccess así:

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


Enlace al artículo original, consulte los comentarios para ver posibles advertencias. También incluye una implementación para C #.

Arregle el valor incorrecto X-UA-Compatible de una vez por todas

¡Espero que esto ayude!

D. Alejandro
fuente
1
En el momento de escribir este artículo, esta solución está implementada en el archivo HTML5BP .htaccess. Por lo tanto, siempre que su servidor Apache tenga habilitado mod_headers, sería seguro eliminarlo del <meta>archivo html.
Patrick James McDougle
Si está utilizando Spring MVC, como yo, todavía es bastante fácil de hacer. Estás buscando:, response.addHeader("X-UA-Compatible", "IE=edge,chrome=1");pero aquí hay una esencia completa de github .
Paul Nelson Baker
1
@PatrickJamesMcDougle que tenía que permitir que tanto los headersy setenvifmods en mi servidor Apache para conseguir que esto funcione.
iglvzx
¿Importa dónde se agrega esto? ¿Debería ser lo primero?
Staysee
1
Responsable del validador HTML del W3C aquí. Si coloca "chrome = 1" en el valor, la solución en esta respuesta no funcionará más, porque desde entonces también agregamos una verificación para el encabezado (junto con la verificación del meta elemento), y según la especificación HTML, en cualquier lugar (el meta elemento o el encabezado) el único valor permitido es "IE = Edge".
sideshowbarker
1

Si descarga / crea el código src del validador, puede agregar soporte usted mismo.

Agregue lo siguiente a un archivo como html5-meta-X-UA-Compatible.rnc) Luego inclúyalo enhtml5full.rnc .

Hice esto y funciona muy bien 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
fuente
0

Elimínelo ,chrome=1de la metaetiqueta, funcionará bien. Con validador:

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

Tuve el mismo problema y agregar y rodear toda la línea solucionó la situación.

<!--[if IE]><meta http-equiv="x-ua-compatible" content="IE=9" /><![endif]-->
cinemafunk
fuente
1
¿Alguien sabe por qué se vota en contra? De hecho, hace que el validador funcione correctamente.
Maciej Paprocki
2
Probablemente porque en realidad no logra nada. 1. Los comentarios condicionales no funcionan en IE10 y versiones posteriores. 2. X-UA-Compatible es para hacer que los navegadores más nuevos emulen a los más antiguos. Entonces, lo que esta línea dice efectivamente es: 1. IE 10 y 11, renderizar usando el modo predeterminado (ya que ya no analizan comentarios condicionales) 2. IE 9, renderizar como IE 9 (es decir, su modo predeterminado en la mayoría de los casos). 3. IE <9, renderizar usando el modo predeterminado (ya que no pueden emular un navegador más nuevo que ellos)
aleayr
También agregaré que hace que el validador funcione 'correctamente' porque está dentro de un comentario (por lo tanto, el validador lo ignora).
aleayr