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

¿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 una página empieza por

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

Si no hay ninguna diferencia, supongo que puedo ignorar la meta cabecera X-UA-Compatible, ya que sólo quiero que se renderice en el modo más estándar en todas las versiones de IE.

Solución

Actualización de octubre de 2015

Esta respuesta fue publicada hace varios años y ahora la pregunta debería ser ¿Debería considerar el uso de la etiqueta X-UA-Compatible en su sitio? con los cambios que Microsoft ha hecho en sus navegadores (más sobre ellos a continuación). Dependiendo de los navegadores de Microsoft que soporte, puede que no necesite seguir usando la etiqueta "X-UA-Compatible". Si necesita soportar IE9 o IE8, entonces recomendaría usar la etiqueta. Si sólo es compatible con los navegadores más recientes (IE11 y/o Edge), entonces consideraría dejar de usar esta etiqueta. Si utiliza Twitter Bootstrap y necesita eliminar las advertencias de validación, esta etiqueta debe aparecer en su orden especificado. Información adicional a continuación:

La etiqueta meta X-UA-Compatible permite a los autores de la web elegir la versión de Internet Explorer con la que se debe renderizar la página. IE11 ha introducido cambios en estos modos; véase la nota sobre IE11 que figura a continuación. Microsoft Edge, el navegador que ha sustituido a IE11, sólo respeta la metaetiqueta X-UA-Compatible en determinadas circunstancias. Véase la nota de Microsoft Edge más abajo. Según Microsoft, cuando se utiliza la etiqueta X-UA-Compatible, debe estar lo más alto posible en el head de su documento: Si utiliza la etiqueta META X-UA-Compatible, debe 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 a utilizar el motor de la versión designada. Esto es un golpe de rendimiento porque el navegador debe parar y reiniciar el análisis del contenido. Estas son sus opciones:

  • "IE=edge"
  • "IE=11"
  • "IE=EmulaIE11";
  • "IE=10&quot
  • "IE=EmulateIE10"
  • "IE=9&quot
  • "IE=EmulateIE9
  • "IE=8&quot
  • "IE=EmulateIE8&quot
  • "IE=7&quot
  • "IE=EmulateIE7&quot
  • "IE=5" Para intentar comprender lo que significa cada una, he aquí las definiciones proporcionadas por Microsoft:

    Internet Explorer admite una serie de modos de compatibilidad de documentos que permiten diferentes características y pueden afectar a la forma en que se muestra el contenido:

    • El modo Edge 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 futura versión de Internet Explorer admitiera un modo de compatibilidad superior, las páginas configuradas en el modo Edge aparecerían en el modo más alto admitido por esa versión. Esas mismas páginas seguirían apareciendo en modo IE9 cuando se vieran con Internet Explorer 9. Internet Explorer admite una serie de modos de compatibilidad de documentos que habilitan diferentes características y pueden afectar a la forma en que se muestra el contenido:
    • El modo IE11 proporciona la mayor compatibilidad disponible con los estándares establecidos y emergentes del sector, incluidos el HTML5, el CSS3 y otros.
    • El modo IE10 proporciona la mayor compatibilidad disponible con los estándares establecidos y emergentes de la industria, incluyendo el HTML5, CSS3 y otros. El modo IE9 proporciona la mayor compatibilidad disponible con los estándares industriales establecidos y emergentes, incluidos el HTML5 (borrador de trabajo), la especificación de hojas de estilo en cascada de nivel 3 del W3C (borrador de trabajo), la especificación de gráficos vectoriales escalables (SVG) 1.0 y otros. [Nota del editor: IE 9 no admite animaciones CSS3]. El modo IE8 es compatible con muchos estándares establecidos, como la especificación de hojas de estilo en cascada de nivel 2.1 del W3C y la API de selectores del W3C; también ofrece una compatibilidad limitada con la especificación de hojas de estilo en cascada de nivel 3 del W3C (borrador de trabajo) y otros estándares emergentes. El modo IE7 renderiza el contenido como si se mostrara en el modo estándar de Internet Explorer 7, tanto si la página contiene una directiva como si no. El modo Emular IE9 indica a Internet Explorer que utilice la directiva para determinar la forma de representar el contenido. Las directivas del modo estándar se muestran en el modo IE9 y las del modo peculiar se muestran en el modo IE5. A diferencia del modo IE9, el modo Emular IE9 respeta la directiva . Emular el modo IE8 indica a Internet Explorer que utilice la directiva para determinar la forma de representar el contenido. Las directivas del modo estándar se muestran en el modo IE8 y las del modo peculiar se muestran en el modo IE5. A diferencia del modo IE8, el modo Emular IE8 respeta la directiva . Emular el modo IE7 indica a Internet Explorer que utilice la directiva para determinar la forma de 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 . Para muchos sitios web, este es el modo de compatibilidad preferido. El modo IE5 muestra el contenido como si se mostrara en el modo quirks de Internet Explorer 7, 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 forma diferente a como lo hacía en versiones anteriores del navegador. En IE9 y versiones anteriores, el modo quirks restringía la página web a las características soportadas por IE5.5. En IE10, el modo quirks se ajusta a las diferencias especificadas en la especificación HTML5. Personalmente, siempre elijo la metaetiqueta http-equiv="X-UA-Compatible" content="IE=edge", ya que las versiones más antiguas tienen muchos errores, y no quiero que IE decida entrar en "Modo de compatibilidad" y mostrar mi sitio como IE7 frente a IE8 o 9. Siempre prefiero la última versión de IE. ***IE11*** De [Microsoft][2]: A partir de IE11, el modo borde es el modo de documento preferido; representa el mayor soporte para los estándares modernos disponibles para el navegador. Utilice la declaración del tipo de documento HTML5 para habilitar el modo edge: `` El modo Edge se introdujo en Internet Explorer 8 y ha estado disponible en todas las versiones posteriores. Tenga en cuenta que las características soportadas por el modo edge están limitadas a las soportadas por la versión específica del navegador que renderiza el contenido. A partir de IE11, los modos de documento están obsoletos y no deberían utilizarse, salvo de forma temporal. Asegúrese de actualizar los sitios que dependen de las características heredadas y los modos de documento para reflejar los estándares modernos. Si tiene que utilizar un modo de documento específico para que su sitio funcione mientras lo adapta a los estándares y características modernas, tenga en cuenta que está utilizando una característica transitoria, que puede no estar disponible en futuras versiones. Si actualmente utiliza la cabecera compatible con x-ua para orientar un modo de documento heredado, es posible que su sitio no refleje la mejor experiencia disponible con IE11. ***Microsoft Edge][3] (Sustituto de Internet Explorer que viene incluido en Windows 10)*** Información sobre la metaetiquetaX-UA-Compatiblepara la versión "Edge" de IE. [De Microsoft][4]: **Presentación del modo de documento "vivo" de Edge** Como anunciamos en agosto de 2013, estamos dejando de lado los modos de documento a partir de IE11. Con nuestras últimas actualizaciones de la plataforma, la necesidad de los modos de documento heredados se limita principalmente a las aplicaciones web heredadas de la empresa. Con los nuevos cambios de arquitectura, estos modos de documento heredados se aislarán de los cambios en el modo "vivo" de Edge, lo que ayudará a garantizar un nivel mucho mayor de compatibilidad para los clientes que dependen de esos modos y nos ayudará a avanzar aún más rápido en las mejoras de Edge. IE seguirá respetando los modos de documentos servidos por los sitios de la intranet, los sitios de la lista de la Vista de Compatibilidad y cuando se utilicen sólo con el Modo Empresa. Los sitios públicos de Internet se renderizarán con la nueva plataforma de modo Edge (ignorando X-UA-Compatible). 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 dejar de soportar los modos de documento en la mayoría de los casos, Microsoft tiene una [herramienta][5] para escanear su sitio para comprobar y ver si tiene código que no es compatible con Edge. ***Información para IE: "Chrome=1". También haychrome=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 Google's Chrome Frame que se define como: Google Chrome Frame es un complemento del navegador de código abierto. Los usuarios que tienen instalado el complemento 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 la experiencia de navegación en Internet Explorer. Muestra los sitios habilitados para Google Chrome Frame mediante la tecnología de renderizado de Google Chrome, lo que le permite acceder a las últimas funciones de HTML5, así como a las características de rendimiento y seguridad de Google Chrome, sin interrumpir en modo alguno el uso habitual del navegador. Cuando Google Chrome Frame está instalado, la web mejora sin que tengas que pensar en ello. Pero para que este complemento funcione debes utilizarchrome=1en la metaetiquetaX-UA-Compatible. Puede encontrar más información sobre Chrome Frame [aquí][6]. **Nota:** Google Chrome Frame solo funciona para [IE6 a IE9][13], y fue retirado el 25 de febrero de 2014. Se puede encontrar más información [aquí][7]. Gracias a @mck por el enlace. ***Validación:*** **HTML5**: La página se validará usando el [W3 Validator][8] sólo cuando se use<meta http-equiv="X-UA-Compatible" content="IE=Edge">. Para otros valores arrojará el siguiente error:Un elemento meta con un atributo http-equiv cuyo valor es X-UA-Compatible debe tener un atributo content con el valor IE=edge.En otras palabras, si tieneIE=edge,chrome=1no se 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, entonces considere hacer esto a nivel del servidor estableciendo la cabecera HTTP. Como nota, Microsoft dice,Si se envían ambas instrucciones (meta y HTTP), la preferencia del desarrollador (elemento meta) tiene prioridad sobre la configuración del servidor web (cabecera HTTP).Ver [olibre's answer][9] o [bitinn's answer][10] para más detalles sobre cómo establecer una cabecera HTTP. **XHTML** No hay ningún problema de validación cuando se utiliza<meta http-equiv="X-UA-Compatible" content="IE=Edge" />siempre que la etiqueta se cierre correctamente (es decir,/>frente a>`). Twitter Bootstrap Esta etiqueta ha sido fuertemente recomendada por el equipo de Bootstrap desde al menos 2014, y Bootlint, el linter creado por el equipo de twbs sigue lanzando una advertencia cuando se omite la etiqueta. El linter distingue entre advertencias y errores, por lo que la gravedad de omitir esta etiqueta puede considerarse menor.

      Para más información sobre X-UA-Compatible vea Microsoft's Website Defining Document Compatibility. Para más información sobre lo que soporta IE vea caniuse.com. Para más información sobre los requisitos de Twitter Bootstrap, véase el proyecto bootlint página wiki.

Comentarios (31)

Utilice content="IE=edge,chrome=1"   Omita otros modos `X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                   -------------------------- 
  • No hay icono de compatibilidad
    La barra de direcciones de IE9 no muestra el [botón de vista de compatibilidad][MSICON]
    y la página no muestra también un revoltijo de menús, imágenes y cuadros de texto fuera de lugar.
  • Características
    Esta etiqueta meta es necesaria para habilitar javascript::JSON.parse() en IE8
    (incluso cuando `` está presente)
  • Corrección
    La renderización/ejecución de HTML/CSS/JavaScript moderno es más válida (más bonita).
  • Rendimiento
    El [motor de renderizado Trident][] debería funcionar más rápido en su modo edge. Motor de renderizado [Trident]: https://en.wikipedia.org/wiki/Internet_Explorer

    Uso

    En su HTML




    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge significa que IE debe usar la última versión (edge) de su motor de renderizado

  • chrome=1 significa que IE debe 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's)

  • Apache como propone pixeline

          BrowserMatch MSIE ie
          Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
    
        Apéndice del encabezado Vary User-Agent
  • Nginx como propone Stef Pause servidor {

    ...

        add_header X-UA-Compatible "IE=Edge,chrome=1";
      }
  • Varnish proxy 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)


Microsoft recomienda el modo Edge desde IE11

Tal y como ha advertido Lynda (ver comentarios), los Cambios de compatibilidad en IE11 recomiendan el modo Edge:

A partir de IE11, el modo 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 era clara. Otra [página de MSDN no recomendaba el modo Edge][noEdge]:

Porque el modo Edge obliga a abrir todas las páginas en modo estándar, independientemente de la versión de Internet Explorer, podría estar tentado de usar esto para todas las páginas que se ven con Internet Explorer. No lo haga, ya que la cabecera "X-UA-Compatible" sólo es compatible a partir de con Windows Internet Explorer 8. En su lugar, Microsoft recomienda utilizar ``: Si quiere 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 más abajo) se puede utilizar cualquier DOCTYPE (HTML4, XHTML1...) para activar el Modo Estándar, no sólo el DOCTYPE de HTML5. Lo importante es tener siempre un DOCTYPE en la página. Clara Onager se ha dado cuenta incluso en una versión anterior de Especificación de los modos de documento heredados: El modo Edge está pensado sólo para 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 sólo 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 era superior al 80%][IEMS]. Y IE **v6** se consideraba un estándar *de facto* (80% a 97% de cuota de mercado en [2003][OneStat], [2004, 2005 y 2006][IE6] sólo para IE6, más cuota de mercado con todas las versiones de IE). Como IE6 no respetaba los [estándares web](http://en.wikipedia.org/wiki/Web_standards), los desarrolladores **tenían** que probar su sitio web con IE6. Esta situación era genial para Microsoft (MS), ya que los desarrolladores web tenían que **comprar** productos de MS (por ejemplo, IE no se puede utilizar sin comprar Windows), y era más rentable no cumplir con los estándares (es decir, Microsoft quería convertirse en **el** estándar excluyendo a otras empresas). Por lo tanto, muchos sitios sólo cumplían con IE6, y como IE no cumplía con el estándar web, todos estos sitios web no se veían bien en los navegadores que cumplían con los estándares. Peor aún, [muchos sitios sólo requerían IE](http://hintsforums.macworld.com/showthread.php?t=111479). Sin embargo, en ese momento, Mozilla comenzó el desarrollo de Firefox respetando al máximo todos los estándares web (se implementaron otros navegadores para renderizar las páginas como lo hacía IE6). Como cada vez más desarrolladores web querían utilizar las nuevas características 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 seguir siendo incompatible 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. --------------------------------- La cuestión de la incompatibilidad web --------------------------- Pero el problema son todos los sitios web diseñados para IE6: Microsoft no podía lanzar nuevas versiones de IE incompatibles con estos viejos sitios web diseñados para IE6. En lugar de deducir la versión de IE con la que se ha diseñado un sitio web, MS pidió a los desarrolladores que añadieran datos extra (`X-UA-Compatible`) en sus páginas. IE6 se sigue utilizando en 2016 ------------------------- En la actualidad, IE6 se sigue utilizando [(0,7% en 2016)][IE62014] (4,5% en enero de 2014), y algunos sitios web de Internet siguen siendo compatibles solo con IE6. Algunos sitios web/aplicaciones de la intranet se prueban con IE6. Algunos sitios web de la intranet son 100% funcionales solo en IE6. Estas empresas/departamentos prefieren posponer el coste de la migración: otras prioridades, nadie sabe ya cómo se ha implementado el sitio web/aplicación, el propietario del sitio web/aplicación heredado ha quebrado... China representa [el 50% del uso de IE6 en 2013](www.ie6countdown.com/), pero puede cambiar en los próximos años a medida que se difunda [la distribución china de Linux](http://www.canonical.com/content/canonical-and-chinese-standards-body-announce-ubuntu-collaboration). Confía en tus conocimientos de la web --------------------------------- Si (intenta) respetar el estándar web, puede simplemente utilizar siempre `http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"`. Para mantener la compatibilidad con los navegadores antiguos, basta con evitar el uso de las últimas características de la web: utilice el subconjunto soportado por el navegador más antiguo que quiera soportar. O, si quiere ir más allá, puede adoptar conceptos como [degradación gradual], [mejora progresiva] y [JavaScript no intrusivo]. (También puede gustarle leer [¿Qué debe tener en cuenta un desarrollador web?]). No se preocupe por el mejor renderizado de la versión de IE: este no es su trabajo, ya que los navegadores tienen que cumplir con los estándares web. Si su sitio es compatible con los estándares y utiliza las características moderadamente más recientes, por lo tanto **los navegadores tienen que ser compatibles con su sitio web**. Además, como hay muchas campañas para _matar_ a IE6 ([IE6 no more](http://www.ie6nomore.com/), [campaña de MS](http://www.webmonkey.com/2011/03/microsoft-kicks-off-campaign-to-kill-internet-explorer-6/)), ¡hoy en día puedes evitar perder el tiempo con las pruebas de IE! Experiencia personal con IE6 ----------------------- En 2009-2012, trabajé para una empresa que utilizaba IE6 como el *navegador único oficial permitido*. Tuve que implementar un sitio web de la intranet sólo para IE6. Decidí respetar el estándar web pero utilizando el subconjunto apto para IE6 (HTML/CSS/JS). Fue difícil, pero cuando la empresa cambió a IE8, el sitio web seguía siendo bien renderizado porque había utilizado Firefox y [firebug][FB] para comprobar la compatibilidad con el estándar web ;) [Clara]: https://stackoverflow.com/users/1400368 [noEdge]: http://msdn.microsoft.com/library/jj676915.aspx#DCModes [MSICON]: http://windows.microsoft.com/en-US/internet-explorer/products/ie-9/features/compatibility-view [IEMS]: http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg [IE6]: http://en.wikipedia.org/wiki/Internet_Explorer#Desktop_Market_share_by_year_and_version [OneStat]: http://www.onestat.com/html/aboutus_pressbox23.html [IE62014]: http://marketshare.hitslink.com/report.aspx?qprid=3&qpaf=&qpcustom=Microsoft+Internet+Explorer+6.0&qpcustomb=0 [FB]: http://en.wikipedia.org/wiki/Firebug_%28software%29 [Degradación gradual]: http://www.w3.org/wiki/Graceful_degredation_versus_progressive_enhancement [Mejora progresiva]: http://en.wikipedia.org/wiki/Progressive_enhancement [JavaScript no intrusivo]: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript [¿Qué debe tener en cuenta un desarrollador web?]: https://softwareengineering.stackexchange.com/questions/46716
Comentarios (20)

Use esto para forzar 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" />
Comentarios (8)