¿Qué hace <meta http-equiv="X-UA-Compatible" content="IE=edge">?

Resuelto Morgan Cheng asked hace 13 años • 12 respuestas

¿Cuál es la diferencia si una página web comienza con

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

y si la página comienza con

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- without X-UA-Compatible meta -->

Si no hay diferencia, supongo que puedo simplemente ignorar el X-UA-Compatiblemeta encabezado, ya que solo quiero que se represente en la mayoría de los modos estándar en todas las versiones de IE.

Morgan Cheng avatar Jul 21 '11 11:07 Morgan Cheng
Aceptado

Actualización de noviembre de 2021

Como esta respuesta tiene ahora más de 10 años, mi recomendación sería omitir esta etiqueta por completo, a menos que deba admitir navegadores antiguos.

Actualización de octubre de 2015

Esta respuesta se publicó hace varios años y ahora la pregunta realmente debería ser ¿ debería considerar usar la X-UA-Compatibleetiqueta en su sitio? con los cambios que Microsoft ha realizado en sus navegadores (más sobre los siguientes).

Dependiendo de los navegadores de Microsoft que admita, es posible que no necesite continuar usando la X-UA-Compatibleetiqueta. Si necesita admitir IE9 o IE8, le recomendaría utilizar la etiqueta. Si solo admite los navegadores más recientes (IE11 y/o Edge), consideraría eliminar esta etiqueta por completo. Si utiliza Twitter Bootstrap y necesita eliminar las advertencias de validación, esta etiqueta debe aparecer en el orden especificado. Información adicional a continuación:

La X-UA-Compatiblemetaetiqueta permite a los autores web elegir con qué versión de Internet Explorer se debe representar la página. IE11 ha realizado cambios en estos modos; consulte la nota de IE11 a continuación. Microsoft Edge , el navegador que reemplazó a IE11, solo respeta la X-UA-Compatiblemetaetiqueta en determinadas circunstancias. Consulte la nota de Microsoft Edge a continuación.

Según Microsoft, al utilizar la X-UA-Compatibleetiqueta, ésta debe estar lo más arriba posible en su documento head:

Si está utilizando la etiqueta META compatible con X-UA, deberá colocarla lo más cerca posible de la parte superior del HEAD de la página. Internet Explorer comienza a interpretar el marcado utilizando la última versión. Cuando Internet Explorer encuentra la etiqueta META compatible con X-UA, comienza de nuevo utilizando el motor de la versión designada. Esto afecta al rendimiento porque el navegador debe detenerse y reiniciarse analizando el contenido.

Aquí están sus opciones:

  • "IE=borde"
  • "IE=11"
  • "IE=EmularIE11"
  • "IE=10"
  • "IE=EmularIE10"
  • "IE=9"
  • "IE=EmularIE9
  • "Es decir = 8"
  • "IE=EmularIE8"
  • "IE=7"
  • "IE=EmularIE7"
  • "Es decir = 5"

Para intentar comprender lo que significa cada uno, aquí hay definiciones proporcionadas por Microsoft:

Internet Explorer admite varios modos de compatibilidad de documentos que habilitan diferentes funciones y pueden afectar la forma en que se muestra el contenido:

  • El modo Edge le indica a Internet Explorer que muestre el contenido en el modo más alto disponible. Con Internet Explorer 9, esto equivale al modo IE9. Si una versión futura de Internet Explorer admitiera un modo de compatibilidad superior, las páginas configuradas en el modo perimetral aparecerían en el modo más alto admitido por esa versión. Esas mismas páginas seguirán apareciendo en modo IE9 cuando se vean con Internet Explorer 9. Internet Explorer admite varios modos de compatibilidad de documentos que habilitan diferentes funciones y pueden afectar la forma en que se muestra el contenido:
  • El modo IE11 proporciona el mayor soporte disponible para estándares industriales establecidos y emergentes, incluidos HTML5, CSS3 y otros.
  • El modo IE10 proporciona el mayor soporte disponible para estándares industriales establecidos y emergentes, incluidos HTML5, CSS3 y otros.
  • El modo IE9 proporciona el mayor soporte disponible para estándares industriales establecidos y emergentes, incluido HTML5 (borrador de trabajo), especificación de nivel 3 de hojas de estilo en cascada W3C (borrador de trabajo), especificación de gráficos vectoriales escalables (SVG) 1.0 y otros. [Nota del editor: IE 9 no admite animaciones CSS3].
  • El modo IE8 admite muchos estándares establecidos, incluida la especificación de nivel 2.1 de hojas de estilo en cascada del W3C y la API de selectores del W3C; También proporciona soporte limitado para la especificación de nivel 3 de hojas de estilo en cascada del W3C (borrador de trabajo) y otros estándares emergentes.
  • El modo IE7 presenta el contenido como si Internet Explorer 7 lo mostrara en modo estándar, independientemente de si la página contiene una directiva <!DOCTYPE>.
  • El modo Emular IE9 le indica a Internet Explorer que use la directiva <!DOCTYPE> para determinar cómo representar el contenido. Las directivas del modo estándar se muestran en el modo IE9 y las directivas del modo peculiar se muestran en el modo IE5. A diferencia del modo IE9, el modo Emular IE9 respeta la directiva <!DOCTYPE>.
  • El modo Emular IE8 le indica a Internet Explorer que use la directiva <!DOCTYPE> para determinar cómo representar el contenido. Las directivas del modo estándar se muestran en el modo IE8 y las directivas del modo peculiar se muestran en el modo IE5. A diferencia del modo IE8, el modo Emular IE8 respeta la directiva <!DOCTYPE>.
  • El modo Emular IE7 le indica a Internet Explorer que use la directiva <!DOCTYPE> para determinar cómo representar el contenido. Las directivas del modo estándar se muestran en el modo estándar de Internet Explorer 7 y las directivas del modo peculiar se muestran en el modo IE5. A diferencia del modo IE7, el modo Emular IE7 respeta la directiva <!DOCTYPE>. Para muchos sitios web, este es el modo de compatibilidad preferido.
  • El modo IE5 muestra el contenido como si Internet Explorer 7 lo mostrara en modo peculiar, que es muy similar a la forma en que se mostraba el contenido en Microsoft Internet Explorer 5.

NOTA de IE10: A partir de IE10, el modo Quirks se comporta de manera diferente que en versiones anteriores del navegador. En IE9 y versiones anteriores, el modo peculiar restringía la página web a las funciones compatibles con IE5.5. En IE10, el modo peculiar se ajusta a las diferencias especificadas en la especificación HTML5.

Personalmente, siempre elijo la http-equiv="X-UA-Compatible" content="IE=edge"metaetiqueta, ya que las versiones anteriores tienen muchos errores y no quiero que IE decida entrar en "modo de compatibilidad" y muestre mi sitio como IE7 frente a IE8 o 9. Siempre prefiero la última versión de ES DECIR.

IE11

De Microsoft :

A partir de IE11, el modo de borde es el modo de documento preferido; representa el mayor soporte para los estándares modernos disponibles para el navegador.

Utilice la declaración de tipo de documento HTML5 para habilitar el modo de borde:

<!doctype html>

El modo Edge se introdujo en Internet Explorer 8 y ha estado disponible en cada versión posterior. Tenga en cuenta que las funciones admitidas por el modo perimetral se limitan a las admitidas por la versión específica del navegador que muestra el contenido.

A partir de IE11, los modos de documento están en desuso y ya no deberían usarse, excepto de forma temporal. Asegúrese de actualizar los sitios que dependen de funciones y modos de documentos heredados para reflejar los estándares modernos.

Si debe seleccionar un modo de documento específico para que su sitio funcione mientras lo modifica para admitir estándares y funciones modernas, tenga en cuenta que está utilizando una función de transición, una que puede no estar disponible en versiones futuras.

Si actualmente utiliza el encabezado compatible con x-ua para apuntar a un modo de documento heredado, es posible que su sitio no refleje la mejor experiencia disponible con IE11.

Microsoft Edge (reemplazo de Internet Explorer que viene incluido con Windows 10)

Información sobre X-UA-Compatiblela metaetiqueta para la versión "Edge" de IE. De Microsoft :

Presentamos el modo de documento Edge "vivo"

Como anunciamos en agosto de 2013, dejaremos de utilizar los modos de documento a partir de IE11. Con nuestras últimas actualizaciones de plataforma, la necesidad de modos de documentos heredados se limita principalmente a las aplicaciones web heredadas empresariales. Con nuevos cambios arquitectónicos, estos modos de documentos heredados se aislarán de los cambios en el modo Edge "vivo", lo que ayudará a garantizar un nivel mucho más alto de compatibilidad para los clientes que dependen de esos modos y nos ayudará a avanzar aún más rápido en las mejoras en Edge. . IE seguirá respetando los modos de documentos ofrecidos por los sitios de intranet, los sitios en la lista Vista de compatibilidad y cuando se usen solo con el Modo Empresarial.

Los sitios públicos de Internet se representarán con la nueva plataforma en modo Edge (ignorando la compatibilidad con X-UA). Nuestro objetivo es que Edge sea el modo de documento "vivo" de aquí en adelante y no se introducirán más modos de documento en el futuro.

Con los cambios en Microsoft Edge para que ya no admita modos de documentos en la mayoría de los casos, Microsoft tiene una herramienta para escanear su sitio y verificar si tiene código que no es compatible con Edge.

Chrome=1 Información para IE

También existe una chrome=1que puedes usar o usar junto con una de las opciones anteriores como: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">. chrome=1es para Chrome Frame de Google, que se define como:

Google Chrome Frame es un complemento de navegador de código abierto. Los usuarios que tienen el complemento instalado tienen acceso a las tecnologías web abiertas de Google Chrome y al rápido motor JavaScript cuando abren páginas en el navegador.

Google Chrome Frame mejora a la perfección tu experiencia de navegación en Internet Explorer. Muestra sitios habilitados para Google Chrome Frame que utilizan la tecnología de renderizado de Google Chrome, lo que le brinda acceso a las funciones HTML5 más recientes, así como a las funciones de rendimiento y seguridad de Google Chrome sin interrumpir de ninguna manera el uso habitual del navegador.

Cuando se instala Google Chrome Frame, la Web mejora sin que tengas que pensar en ello.

Pero para que ese complemento funcione debes usarlo chrome=1en la X-UA-Compatiblemetaetiqueta.

Puede encontrar más información sobre Chrome Frame aquí .

Nota: Google Chrome Frame solo funciona para IE6 a IE9 y se retiró el 25 de febrero de 2014. Puede encontrar más información aquí . Gracias a @mck por el enlace.

Validación:

HTML5 :

La página se validará usando el Validador W3 solo cuando se use <meta http-equiv="X-UA-Compatible" content="IE=Edge">. Para otros valores arrojará el error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge.O sea, si lo tienes IE=edge,chrome=1no validará. Ignoro este error por completo ya que los navegadores modernos simplemente ignoran esta línea de código.

Si debe tener un código completamente válido, considere hacerlo en el nivel del servidor configurando el encabezado HTTP. Como nota, Microsoft dice: If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). consulte la respuesta de olibre o la respuesta de bitinn para obtener más detalles sobre cómo configurar un encabezado HTTP.

HTML

No hay ningún problema con la validación cuando se usa <meta http-equiv="X-UA-Compatible" content="IE=Edge" />siempre que la etiqueta esté cerrada correctamente (es decir, />vs >).

Twitter Bootstrap (V3 y anteriores)

El equipo de Bootstrap ha recomendado encarecidamente esta etiqueta desde al menos 2014, y Bootlint , el linter creado por el equipo de twbs, continúa arrojando una advertencia cuando se omite la etiqueta. El linter distingue entre advertencias y errores y, como tal, la gravedad de omitir esta etiqueta puede considerarse menor.

Para obtener más información, X-UA-Compatibleconsulte el sitio web de Microsoft que define la compatibilidad de documentos .

Para obtener más información sobre lo que admite IE, consulte caniuse.com .

Para obtener más información sobre los requisitos de Twitter Bootstrap, consulte la página wiki del proyecto bootlint .

L84 avatar Jul 21 '2011 05:07 L84

Usar content="IE=edge,chrome=1"   Saltar otros X-UA-Compatiblemodos

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

  • Sin icono de compatibilidad
    La barra de direcciones de IE9 no muestra el botón Vista de compatibilidad
    y la página tampoco muestra una mezcla de menús, imágenes y cuadros de texto fuera de lugar.

  • Características
    Esta metaetiqueta es necesaria para habilitarse javascript::JSON.parse()en IE8
    (incluso cuando <!DOCTYPE html>esté presente)

  • Corrección
    La representación/ejecución de HTML/CSS/JavaScript moderno es más válida (mejor).

  • Rendimiento
    El motor de renderizado Trident debería funcionar más rápido en su modo de borde .

Uso

En tu HTML

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edgesignifica que IE debería usar la última versión (edge) de su motor de renderizado
  • chrome=1significa que IE debería usar el motor de renderizado de Chrome si está instalado

O mejor en la configuración de su servidor web:
(ver también la respuesta de RiaD )

  • Apache propuesto por pixeline

    <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>
<IfModule mod_headers.c>
  Header append Vary User-Agent
</IfModule>

  • Nginx propuesto por Stef Pause

    server {
  #...
  add_header X-UA-Compatible "IE=Edge,chrome=1";
}

  • Proxy de barniz propuesto por Lucas Riutzel

    sub vcl_deliver {
  if( resp.http.Content-Type ~ "text/html" ) {
    set resp.http.X-UA-Compatible = "IE=edge,chrome=1";
  }
}

  • IIS (desde v7)

    <configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

Microsoft recomienda el modo Edge desde IE11

Como lo notó Lynda (ver comentarios), los cambios de compatibilidad en IE11 recomiendan el modo Edge :

A partir de IE11, el modo de borde es el modo de documento preferido; representa el mayor soporte para los estándares modernos disponibles para el navegador.

Pero la posición de Microsoft no estaba clara. Otra página de MSDN no recomendó el modo Edge :

Debido a que el modo Edge obliga a que todas las páginas se abran en modo estándar, independientemente de la versión de Internet Explorer, es posible que tenga la tentación de utilizarlo para todas las páginas vistas con Internet Explorer. No hagas esto, ya que el X-UA-Compatibleencabezado solo es compatible a partir de Windows Internet Explorer 8.

En cambio, Microsoft recomendó usar <!DOCTYPE html>:

Si desea que todas las versiones compatibles de Internet Explorer abran sus páginas en modo estándar, utilice la declaración de tipo de documento HTML5 [...]

Como explica Ricardo (en los comentarios a continuación), cualquier DOCTYPE (HTML4, XHTML1...) se puede usar para activar el Modo Estándar, no solo el DOCTYPE de HTML5. Lo importante es tener siempre un DOCTYPE en la página.

Clara Onager incluso lo ha notado en una versión anterior de Especificación de modos de documentos heredados :

El modo Edge está destinado únicamente a fines de prueba; no lo utilice en un entorno de producción.

Es tan confuso que Usman Y pensó que Clara Onager estaba hablando de:

El [...] ejemplo se proporciona únicamente con fines ilustrativos; no lo utilice en un entorno de producción.

<meta http-equiv="X-UA-Compatible" content="IE=7,9,10" >

Bueno... En el resto de esta respuesta doy más explicaciones de por qué usar content="IE=edge,chrome=1"es una buena práctica en producción.

Historia

Durante muchos años (2000 a 2008), la cuota de mercado de IE superó el 80% . Y IE v6 se consideró como un estándar de facto (80% a 97% de participación de mercado en 2003 , 2004, 2005 y 2006 sólo para IE6, más participación de mercado con todas las versiones de IE).

Como IE6 no respetaba los estándares web , los desarrolladores tuvieron que probar su sitio web utilizando IE6. Esa situación fue excelente para Microsoft (MS), ya que los desarrolladores web tuvieron que comprar productos de MS (por ejemplo, IE no se puede usar sin comprar Windows), y era más lucrativo no cumplir (es decir, Microsoft quería convertirse en el estándar excluyendo a otros). compañías).

Por lo tanto, muchos sitios eran compatibles únicamente con IE6 y, como IE no cumplía con el estándar web, todos estos sitios web no se representaban bien en navegadores compatibles con los estándares. Peor aún, muchos sitios solo requerían IE .

Sin embargo, en ese momento, Mozilla inició el desarrollo de Firefox respetando al máximo todos los estándares web (se implementaron otros navegadores para representar páginas como lo hacía IE6). A medida que más y más desarrolladores web querían utilizar las nuevas funciones de los estándares web, cada vez más sitios web eran más compatibles con Firefox que con IE.

Cuando la cuota de mercado de IE estaba disminuyendo, MS se dio cuenta de que mantener la incompatibilidad con los estándares no era una buena idea. Por lo tanto, MS comenzó a lanzar nuevas versiones de IE (IE8/IE9/IE10) respetando cada vez más los estándares web.

El problema de la incompatibilidad web

Pero el problema son todos los sitios web diseñados para IE6: Microsoft no pudo lanzar nuevas versiones de IE incompatibles con estos antiguos sitios web diseñados para IE6. En lugar de deducir la versión de IE con la que se diseñó un sitio web, MS solicitó a los desarrolladores que agregaran datos adicionales ( X-UA-Compatible) en sus páginas.

IE6 todavía se usa en 2016

Hoy en día, todavía se utiliza IE6 (0,7 % en 2016) (4,5 % en enero de 2014) y algunos sitios web de Internet todavía son compatibles únicamente con IE6. Algunos sitios web/aplicaciones de intranet se prueban con IE6. Algunos sitios web de intranet son 100% funcionales solo en IE6. Estas empresas/departamentos prefieren posponer el coste de la migración: otras prioridades, ya nadie sabe cómo se ha implementado el sitio web/aplicación, el propietario del sitio web/aplicación heredado quebró...

China representa el 50% del uso de IE6 en 2013, pero puede cambiar en los próximos años a medida que se difunda la distribución china de Linux .

Tenga confianza en sus habilidades web

Si (intentas) respetar el estándar web, simplemente siempre puedes usar http-equiv="X-UA-Compatible" content="IE=edge,chrome=1". Para mantener la compatibilidad con navegadores antiguos, simplemente evite utilizar las funciones web más recientes: utilice el subconjunto admitido por el navegador más antiguo que desee admitir. O si desea ir más allá, puede adoptar conceptos como Degradación elegante , Mejora progresiva y JavaScript discreto . (También le complacerá leer ¿ Qué debe considerar un desarrollador web? ).

No se preocupe por la mejor versión de IE: este no es su trabajo ya que los navegadores deben cumplir con los estándares web. Si su sitio cumple con los estándares y utiliza funciones moderadamente más recientes, los navegadores deben ser compatibles con su sitio web .

Además, como hay muchas campañas para acabar con IE6 ( ya no IE6 , campaña de MS ), ¡hoy en día puedes evitar perder el tiempo con las pruebas de IE!

Experiencia personal en IE6

En 2009-2012, trabajé para una empresa que utilizaba IE6 como navegador único oficial permitido . Tuve que implementar un sitio web de intranet solo para IE6. Decidí respetar el estándar web pero usando el subconjunto compatible con IE6 (HTML/CSS/JS).

Fue difícil, pero cuando la empresa cambió a IE8, el sitio web todavía estaba bien representado porque había usado Firefox y Firebug para verificar la compatibilidad con el estándar web;)

oHo avatar Jan 20 '2012 13:01 oHo

La diferencia es que si solo especifica DOCTYPE, la configuración de Vista de compatibilidad de IE tiene prioridad. De forma predeterminada, esta configuración obliga a todos los sitios de intranet a acceder a la Vista de compatibilidad independientemente del archivo DOCTYPE. También hay una casilla de verificación para usar la Vista de compatibilidad para todos los sitios web, independientemente de DOCTYPE.

Cuadro de diálogo Configuración de vista de compatibilidad de IE

X-UA-Compatibleanula la configuración de Vista de compatibilidad, por lo que la página se mostrará en modo estándar independientemente de la configuración del navegador. Esto fuerza el modo estándar para:

  • páginas de intranet
  • páginas web externas cuando el administrador de la computadora ha elegido "Mostrar todos los sitios web en Vista de compatibilidad" como valor predeterminado: piense en grandes empresas, gobiernos, universidades
  • cuando sin querer terminas en la lista de Vista de compatibilidad de Microsoft
  • casos en los que los usuarios han agregado manualmente su sitio web a la lista en Configuración de vista de compatibilidad

DOCTYPEsolo no puede hacer eso; terminará en uno de los modos de Vista de compatibilidad en estos casos, independientemente de DOCTYPE.

Si metase especifican tanto la etiqueta como el encabezado HTTP, la metaetiqueta tiene prioridad.

Esta respuesta se basa en examinar las reglas completas para decidir el modo de documento en IE8 , IE9 e IE10 . Tenga en cuenta que mirar DOCTYPEes el último recurso para decidir el modo del documento.

andrewdotn avatar Mar 25 '2013 19:03 andrewdotn

Utilice esto para obligar a IE a ocultar ese molesto botón de compatibilidad del navegador en la barra de direcciones:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
George Filippakos avatar Feb 13 '2012 09:02 George Filippakos

Como no puedo agregar un comentario a la respuesta marcada, simplemente publicaré esto aquí.

Además de la respuesta correcta, puedes validar esto. Dado que esta metaetiqueta solo está dirigida a IE, todo lo que necesita hacer es agregar un condicional de IE.

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

Hacer esto es como agregar cualquier otra declaración condicional de IE y solo funciona para IE y ningún otro navegador se verá afectado.

EMurph78 avatar Jun 15 '2014 14:06 EMurph78