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

1439

¿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 ignorar el X-UA-Compatibleencabezado meta, ya que solo quiero que se represente en el modo más estándar en todas las versiones de IE.

html internet-explorer browser x-ua-compatible Morgan Cheng
fuente

Respuestas:

1704

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 usar la etiqueta. Si solo es compatible con los navegadores más recientes (IE11 y / o Edge), consideraría descartar esta etiqueta por completo. Si usa 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 en qué versión de Internet Explorer se debe representar la página. IE11 ha realizado cambios en estos modos; vea la nota IE11 a continuación. Microsoft Edge , el navegador que reemplazó a IE11, solo honra la X-UA-Compatiblemetaetiqueta en ciertas circunstancias. Vea la nota de Microsoft Edge a continuación.

Según Microsoft, al usar la X-UA-Compatibleetiqueta, debe estar lo más alto posible en su documento head:

Si está utilizando la etiqueta META compatible con X-UA, desea colocarla lo más cerca posible de la parte superior del HEAD de la página. Internet Explorer comienza a interpretar el marcado usando la última versión. Cuando Internet Explorer encuentra la etiqueta META compatible con X-UA, comienza de nuevo usando el motor de la versión designada. Este es un golpe de rendimiento porque el navegador debe detener y reiniciar el análisis del contenido.

Aquí están tus opciones:

  • "IE = borde"
  • "IE = 11"
  • "IE = EmulateIE11"
  • "IE = 10"
  • "IE = EmulateIE10"
  • "IE = 9"
  • "IE = EmulateIE9
  • "IE = 8"
  • "IE = EmulateIE8"
  • "IE = 7"
  • "IE = EmulateIE7"
  • "IE = 5"

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

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

  • El modo Edge le dice a Internet Explorer que muestre contenido en el modo más alto disponible. Con Internet Explorer 9, esto es equivalente al modo IE9. Si una versión futura de Internet Explorer admitiera un modo de compatibilidad más alto, las páginas configuradas en modo borde 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 visualizan con Internet Explorer 9. Internet Explorer admite varios modos de compatibilidad de documentos que permiten diferentes funciones y pueden afectar la forma en que se muestra el contenido:

  • El modo IE11 proporciona el soporte más alto disponible para los estándares establecidos y emergentes de la industria, incluidos HTML5, CSS3 y otros.

  • El modo IE10 proporciona el soporte más alto disponible para los estándares establecidos y emergentes de la industria, incluidos HTML5, CSS3 y otros.

  • El modo IE9 proporciona el soporte más alto disponible para estándares establecidos y emergentes de la industria, incluyendo 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 W3C y la API de selectores W3C; también proporciona soporte limitado para la Especificación de Nivel 3 de Hojas de Estilo en Cascada W3C (Borrador de Trabajo) y otros estándares emergentes.

  • El modo IE7 representa el contenido como si Internet Explorer 7 lo mostrara en modo estándar, independientemente de si la página contiene una directiva.

  • El modo Emulate IE9 le dice a Internet Explorer que use la directiva para determinar cómo representar el contenido. Las directivas en modo estándar se muestran en modo IE9 y las directivas en modo peculiar se muestran en modo IE5. A diferencia del modo IE9, el modo Emulate IE9 respeta la directiva.

  • El modo Emular IE8 le dice a Internet Explorer que use la directiva para determinar cómo representar el contenido. Las directivas en modo estándar se muestran en modo IE8 y las directivas en modo peculiar se muestran en modo IE5. A diferencia del modo IE8, el modo Emulate IE8 respeta la directiva.

  • El modo Emular IE7 le dice a Internet Explorer que use la directiva 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 Emulate IE7 respeta la directiva. Para muchos sitios web, este es el modo de compatibilidad preferido.

  • El modo IE5 procesa el contenido como si Internet Explorer 7 lo mostrara en modo peculiar, que es muy similar a la forma en que se mostró el contenido en Microsoft Internet Explorer 5.

NOTA de IE10: a partir de IE10, el modo de peculiaridades se comporta de manera diferente que en versiones anteriores del navegador. En IE9 y versiones anteriores, el modo peculiar restringió 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 vs IE8 o 9. Siempre prefiero la última versión de ES DECIR.

IE11

De Microsoft :

Comenzando con IE11, el modo de borde es el modo de documento preferido; Representa el soporte más alto para los estándares modernos disponibles para el navegador.

Use la declaración de tipo de documento HTML5 para habilitar el modo 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 borde están limitadas a las admitidas por la versión específica del navegador que representa 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 se basan en características heredadas y modos de documentos para reflejar los estándares modernos.

Si debe apuntar a un modo de documento específico para que su sitio funcione mientras lo vuelve a trabajar 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 futuras versiones.

Si actualmente usa 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 para Internet Explorer que viene incluido con Windows 10)

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

Presentamos el modo de documento Edge "vivo"

Como anunciamos en agosto de 2013, estamos despreciando los modos de documentos 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 de Enterprise. 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 documento que sirven los sitios de intranet, los sitios en la lista Vista de compatibilidad y cuando se usan solo con el Modo de empresa.

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

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

Chrome = 1 Información para IE

También hay chrome=1que se puede utilizar o utilizar 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 veloz motor JavaScript cuando abren páginas en el navegador.

Google Chrome Frame mejora a la perfección su experiencia de navegación en Internet Explorer. Muestra los 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 de su navegador.

Cuando se instala Google Chrome Frame, la web mejora sin que tenga que pensarlo.

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

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

Nota: Google Chrome Frame solo funciona para IE6 hasta 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.en otras palabras, si lo tiene IE=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, 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). Vea la respuesta de olibre o la respuesta de bitinn para obtener más detalles sobre cómo configurar un encabezado HTTP.

XHTML

No hay un 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

Esta etiqueta ha sido muy recomendada por el equipo de Bootstrap desde al menos 2014, y Bootlint , el linter creado por el equipo twbs continúa lanzando una advertencia cuando se omite la etiqueta. La interfaz 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 qué es compatible con IE, visite caniuse.com .

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

L84
fuente
40
Si no tengo "X-UA-Compatible" en los encabezados, ¿qué pasaría?
Morgan Cheng
45
Básicamente, lo que sucede es que cuando tienes el X-UA-Compatible, le dice a IE cómo comportarse con respecto al valor que estableces (IE = edge, etc.) si no está allí, IE mostrará al sitio cómo cree que debería mostrarse mejor . Ese podría ser el modo de compatibilidad o esa podría ser la última versión de IE. Cualquier cosa que Microsoft / IE piense que es mejor. ¿Tener sentido?
L84
2
@TravisJ: desde mi punto de vista, el modo más alto disponible básicamente significa que IE 8 puede admitir hasta los modos IE8, IE9 puede admitir los modos IE9, etc. Agregué algunas definiciones para cada modo proporcionado por Microsoft.
L84
10
@AdrienBe - ¡Estoy completamente de acuerdo! Hasta ahora, IE 10 ha sido el mejor para mí, pero desprecio cualquier otra versión. Una vez tuve una configuración de página con algunos efectos alrededor de 200-300 líneas de HTML y unos 20 minutos de codificación. Para que IE funcione, tuve que agregar otras 1,000 líneas de código (principalmente javascript de terceros) y 2-3 horas de trabajo. Realmente odio IE =>
L84
99
Google Chrome Frame se retirará
mck
339

Use 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 habilitar javascript::JSON.parse()en IE8
    (incluso cuando <!DOCTYPE html>está presente)

  • La
    representación / ejecución correcta 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">

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

  • Apache según lo 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 como lo propone 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 notó Lynda (ver comentarios), los cambios de compatibilidad en IE11 recomiendan el modo Edge :

Comenzando con IE11, el modo de borde es el modo de documento preferido; Representa el soporte más alto para los estándares modernos disponibles para el navegador.

Pero la posición de Microsoft no estaba clara. Otro página de MSDN no recomendaba 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 usarlo para todas las páginas vistas con Internet Explorer. No hagas esto, ya que elX-UA-Compatible encabezado 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, use la declaración de tipo de documento HTML5 [...]

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

Clara Onager incluso se ha dado cuenta en una versión anterior de Especificar modos de documentos heredados :

El modo de borde está destinado solo para fines de prueba; No lo use en un entorno de producción.

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

El ejemplo se proporciona solo con fines ilustrativos; No lo use 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 la producción.

Historia

Durante muchos años (2000 a 2008), la cuota de mercado de IE fue superior al 80% . E IE v6 fue considerado como un estándar de facto (80% a 97% de participación de mercado en 2003 , 2004, 2005 y 2006 solo 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 usando IE6. Esa situación fue excelente para Microsoft (MS) ya que los desarrolladores web tuvieron que comprar productos MS (por ejemplo, IE no se puede usar sin comprar Windows), y fue más rentable no cumplir (es decir, Microsoft quería convertirse en el estándar excluyendo otros compañías).

Por lo tanto, muchos sitios solo eran compatibles con IE6, y dado que IE no era compatible con el estándar web, todos estos sitios web no estaban bien representados en navegadores compatibles con los estándares. Peor aún, muchos sitios requieren solo IE .

Sin embargo, en este momento, Mozilla comenzó el desarrollo de Firefox respetando en la mayor medida posible todos los estándares web (se implementaron otros navegadores para procesar páginas como lo hizo IE6). A medida que más y más desarrolladores web querían usar las nuevas características de los estándares web, Firefox apoyó más y más sitios web que IE.

Cuando la participación en el mercado de IE estaba disminuyendo, MS se dio cuenta de que permanecer incompatible con los estándares no era una buena idea. Por lo tanto, MS comenzó a lanzar una nueva versión de IE (IE8 / IE9 / IE10) respetando cada vez más los estándares web.

El problema incompatible con la web

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

IE6 todavía se usa en 2016

Hoy en día, IE6 todavía se usa (0.7% en 2016) (4.5% en enero de 2014), y algunos sitios web de Internet siguen siendo solo compatibles 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 costo 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 difunde la distribución china de Linux .

Ten confianza en tus habilidades web

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

No se preocupe por la mejor representación de la 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 recientes, por lo tanto, los navegadores deben cumplir con su sitio web .

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

Experiencia personal de IE6

En 2009-2012, trabajé para una empresa que usaba IE6 como permitía el navegador único oficial . 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 compañía cambió a IE8, el sitio web todavía estaba bien renderizado porque había usado Firefox y firebug para verificar la compatibilidad del estándar web;)

olibre
fuente
2
'El modo Edge está destinado solo para fines de prueba; no lo use en un entorno de producción ". Ver msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Carl Onager el
55
Por favor, @ClaraOnager tome un tiempo para explicar lo que está mal en mi respuesta (desde su punto de vista). Incluso si MS no recomienda el uso del modo Edge en el entorno de producción, existen buenas razones para usarlo en el entorno de producción. Es importante aclarar técnicamente nuestras mejores prácticas. Me gusta compartir mis conocimientos y experiencias. Espero que tú también. Podemos mejorar juntos;) Saludos
olibre
2
Hola @ Ricardo, estoy de acuerdo contigo. Microsoft dice "Si desea que todas las versiones compatibles de Internet Explorer abran sus páginas en modo estándar, use HTML5 [...]" en la sección Descripción de los modos de documentos heredados (consulte la Sugerencia ). Tal vez mi explicación no está clara ... Tal vez he entendido mal algo ... He cambiado mi texto ... ¿Qué piensas de mis cambios? ¿Está bien para usted? ¿Qué me aconseja cambiar / mejorar en mi respuesta? Gracias por sus comentarios. Saludos ;-)
olibre
55
@ClaraOnager ... en su primera respuesta, señala incorrectamente, en la página de referencia ... MS dice que no se use en el entorno de producción para: <meta http-equiv = "X-UA-Compatible" content = "IE = 7, 9,10 "> no las otras cosas de borde.
Usman Younas
3
Sobre el modo Edge que se usa en el entorno de producción. De Microsoft:Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.
L84
58

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

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 representará 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 la Vista de compatibilidad" como opción predeterminada: piense en grandes empresas, gobiernos, universidades
  • cuando accidentalmente terminas en la Lista de Vista de Compatibilidad de Microsoft
  • casos en los que los usuarios agregaron manualmente su sitio web a la lista en la Configuración de Vista de compatibilidad

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

Si metase especifican la etiqueta y 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 el DOCTYPEes el último recurso para decidir el modo de documento.

andrewdotn
fuente
1
En el escenario de intranet, por defecto IE10 se representa en modo de compatibilidad. Ver stackoverflow.com/questions/13284083/…. Esta etiqueta no se requiere de manera predeterminada para Internet, pero se requiere (de manera predeterminada) cuando se usa myintenralserver / myapp . Quería agregar este comentario, porque la diferencia entre internet e intranet solo era clara en el texto de la captura de pantalla, no en el texto de ninguna respuesta en la página.
yzorg
Tienes razón, debería haber sido más claro al respecto. Reescribí la publicación; avíseme si hay algo más que deba abordar. ¡Gracias!
andrewdotn
¡Gracias! Esta respuesta es mucho más clara que otras respuestas con respecto a los sitios de intranet. Otras respuestas entran en detalles técnicos sobre por qué y cómo. Odio MS IE. También buena escritura: un párrafo deja en claro por qué necesitamos la metaetiqueta. Bravo
Aniket Inge
3
Desearía poder votar esta respuesta cientos de veces. Captura de pantalla que salva vidas allí mismo. La presión arterial baja mientras
escribo
¡Impresionante, increíble, increíble! Muchas gracias por esta respuesta.
Seanosapien
25

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" />
George Filippakos
fuente
1
'El modo Edge está destinado solo para fines de prueba; no lo use en un entorno de producción ". Ver msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx
Carl Onager el
44
En buena medida, uso <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">con la chrome=1directiva, por lo que incita a los usuarios de IE6, 7, 8 a instalar / usar Chrome Frame . Incluso HTML5 Boilerplate lo usa.
Ricardo Zea
10
@ClaraOnager Aunque Microsoft lo dice, no necesariamente significa que tengan razón. Lo he usado <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">desde el día en que salió sin ningún problema. En realidad, ya he ahorrado a mi equipo y a mí mismo cientos de dolores de cabeza al hacer que el IE de los usuarios use su último motor para renderizar las páginas que construimos. Al contrario que usted y Microsoft, recomiendo a todos que usen la metaetiqueta anterior cada vez . Mientras IE siga existiendo, nos veremos "obligados" a usar esta metaetiqueta: p
Ricardo Zea
Esto ha cambiado con IE11. Esta versión ha dado un paso dramático al mundo de los navegadores siguiendo los estándares oficiales. ¡Ha llegado al extremo de ni siquiera identificarse como Internet Explorer! Ahora dice que es "Netscape" y no incluye nada en la información del navegador para revelar su verdadera identidad. Si aún encuentra alguna peculiaridad en el navegador IE a partir de esta versión, debe forzarlo a IE10 configurando <meta http-equiv="X-UA-Compatible" content="IE=10">. Luego se informa a sí mismo como Microsoft Internet Explorer.
asombro
enfrentando el mismo problema relacionado, si alguien me puede ayudar: stackoverflow.com/questions/22013880/…
dsi
25

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

Además de la respuesta correcta, puede validarla. 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
fuente
44
Los comentarios condicionales no deben usarse EXCEPTO para apuntar HTML para <= IE9. (Esto era cierto incluso cuando se escribió esta respuesta)
EKW
18

Creo que este diagrama de Microsoft explica todo. Para decirle a IE cómo representar el contenido,! DOCTYPE tiene que funcionar con metaetiquetas compatibles con X-UA. ! DOCTYPE por sí solo no tiene ningún efecto al cambiar el modo de documento de IE.

ingrese la descripción de la imagen aquí

http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png

James Tsai
fuente
3
Aquí hay una versión actualizada que incluye IE9. OMG ... ie.microsoft.com/testdrive/ieblog/2010/Jun/...
Spiralis
3
Y este incluye IE10: msdn.microsoft.com/en-us/library/ff406036%28v=vs.85%29.aspx Los diferentes capítulos tienen sus propios diagramas de flujo separados ...
Spiralis
Has leído mal ese diagrama de flujo. En ausencia de X-UA-Compatible, el navegador buscará <! DOCTYPE>. Si encuentra uno, lo procesa en modo estándar (también conocido como "EmulateIE8"). Si no lo hace, vuelve al "Modo Extravagante".
Chuck Le Butt
Gracias por subir la imagen a Stackoverflow. Los enlaces originales a Microsoft están todos muertos.
Elmue
12

Solo para completar, en realidad no tiene que agregarlo a su HTML (que es desconocido http-equiv en HTML5)

Haga esto y nunca mire hacia atrás (primer ejemplo para apache , segundo para nginx )

Header set X-UA-Compatible "IE=Edge,chrome=1"

add_header X-UA-Compatible "IE=Edge,chrome=1";
bitinn
fuente
2
@HueiTan: creo que el póster dice que cuando intentas validar la página con el Validador W3 arrojará un error: Bad value X-UA-Compatible for attribute http-equiv on element meta.- Esto no significa que no funcionará. Simplemente no es un código válido.
L84
10

Solo una frase para decir Indique a Internet Explorer que use su último motor de renderizado

<meta http-equiv="x-ua-compatible" content="ie=edge">
Bipon Biswas
fuente
7 
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Para que esta línea funcione como se espera, asegúrese de que:

  1. Es el primer elemento justo después <head>
  2. No se utilizan comentarios condicionales antes de la metaetiqueta, por ejemplo, en el <html>elemento

De lo contrario, algunas versiones de IE simplemente lo ignoran.

ACTUALIZAR

Estas dos reglas están simplificadas, pero son fáciles de recordar y verificar. A pesar de que los documentos de MSDN indican que puede poner el título y otras metaetiquetas antes de este, no recomendaría hacerlo.

Cómo hacer que funcione con comentarios condicionales.

Interesante artículo sobre el orden de los elementos en la cabeza. (blogs.msdn.com, para IE)

REFERENCIA

De la documentación de MSDN :

El X-UA-Compatible[...] debe aparecer en el encabezado de la página web (la sección HEAD) antes de todos los demás elementos, excepto el elemento de título y otros metaelementos.

ToniTornado
fuente
5

si usa su sitio web en la misma red que el servidor, a IE le gusta cambiar al modo de compatibilidad a pesar de DOCTYPE.
Agregar meta http-equiv="X-UA-Compatible" content="IE=Edge" deshabilita este comportamiento no deseado.

Łukasz Jakóbiec
fuente
Otra palabra para 'misma red que el servidor' es intranet ... por lo que básicamente IE10 está roto por defecto para todos los sitios de intranet. Ver captura de pantalla en @AndrewNeitsch respuesta.
yzorg
3

Esta es literalmente 1 consulta de Google de distancia , pero aquí va:

http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

Comprender los modos de documentos heredados

Use el siguiente valor para mostrar la página web en modo perimetral, que es el modo de más alto nivel compatible con Internet Explorer, desde Internet Explorer 6 hasta IE11.

<meta http-equiv="x-ua-compatible" content="IE=edge"

Tenga en cuenta que esto es funcionalmente equivalente al uso del doctype HTML5. Coloca Internet Explorer en el modo de documento más compatible. Edge most es más útil para sitios web mantenidos regularmente que se prueban rutinariamente para la interoperabilidad entre varios navegadores, incluido Internet Explorer.

Nota A partir de IE11, el modo de borde se considera el modo de documento preferido. (En versiones anteriores, se consideraba experimental). Para obtener más información, consulte Los modos de documento están en desuso. Comenzando con Windows Internet Explorer 8, algunos desarrolladores web utilizaron el metaelemento del modo borde para ocultar el botón Vista de compatibilidad en la barra de direcciones. A partir de IE11, esto ya no es necesario ya que el botón se ha eliminado de la barra de direcciones. Debido a que obliga a que todas las páginas se abran en modo estándar, independientemente de la versión de Internet Explorer, puede tener la tentación de usar el modo borde para todas las páginas vistas con Internet Explorer. No haga esto, ya que el encabezado compatible con X-UA solo es compatible a partir de Internet Explorer 8.

Sugerencia Si desea que todas las versiones compatibles de Internet Explorer abran sus páginas en modo estándar, use la declaración de tipo de documento HTML5, como se muestra en el ejemplo anterior.

También entre los resultados de búsqueda está:

Joe Mike
fuente
2

2.1.3.5 Metaetiqueta de compatibilidad X-UA y encabezado de respuesta HTTP

Esta funcionalidad no se implementará en ninguna versión de Microsoft Edge.

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Ver https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx

Sí, sé que llego tarde a la fiesta, pero tuve algunos problemas y discusiones, y al final mi jefe me hizo quitar la X-UA-Compatibleetiqueta de todos los documentos en los que he estado trabajando.

Si esta información está desactualizada o ya no es relevante, corríjame.

Shawn Spencer
fuente