Pregunta ¿Qué hace do?


¿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-Compatible meta encabezado, ya que solo quiero que se represente en el modo estándar en todas las versiones de IE.


1196
2017-07-21 04:29


origen


Respuestas:


Actualización de octubre de 2015

Esta respuesta fue publicada hace varios años y ahora la pregunta realmente debería ser ¿Deberías considerar usar el X-UA-Compatible etiqueta en tu sitio? con los cambios que Microsoft ha hecho a sus navegadores (más sobre los siguientes).

Dependiendo de los buscadores de Microsoft que admita, es posible que no necesite continuar usando el X-UA-Compatible etiqueta. Si necesita admitir IE9 o IE8, le recomendaría usar la etiqueta. Si solo admite los últimos navegadores (IE11 y / o Edge), consideraría eliminar 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:


los X-UA-Compatible La metaetiqueta permite a los autores de sitios web elegir la versión de Internet Explorer a la que se les asignará la página. IE11 ha realizado cambios en estos modos; vea la nota IE11 a continuación. Microsoft Edge, el navegador que se lanzará después de IE11, solo honrará X-UA-Compatible metaetiqueta en ciertas circunstancias. Consulte la nota de Microsoft Edge a continuación.

Según Microsoft, al usar el X-UA-Compatible etiqueta, debe ser 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 de la CABEZA 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, vuelve a empezar utilizando el motor de la versión designada. Este es un golpe de rendimiento porque el navegador debe detenerse y reiniciar el análisis del contenido.

Estas son sus 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 tratar de entender lo que cada uno significa, aquí hay definiciones provistas por Microsoft:

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

  • El modo Edge le dice a Internet Explorer que muestre el 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 admite un modo de compatibilidad superior, las páginas configuradas en modo borde aparecerán en el modo más alto compatible con esa versión. Esas mismas páginas seguirían apareciendo en modo IE9 cuando se ven con Internet Explorer 9.   Internet Explorer admite varios modos de compatibilidad de documentos que habilitan diferentes características y pueden afectar la forma en que se muestra el contenido:

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

  • El modo IE10 proporciona el soporte más alto disponible para 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 el HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, y otros. [Nota del editor: IE 9 no admite animaciones CSS3].

  • El modo IE8 es compatible con muchos estándares establecidos, incluida la Especificación del Nivel 2.1 de Hojas de Estilo en Cascada 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 otras normas emergentes.

  • El modo IE7 representa el contenido como si fuera mostrado en modo estándar por Internet Explorer 7, independientemente de si la página contiene o no una directiva.

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

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

  • Emular el modo IE7 le dice a Internet Explorer que use la directiva para determinar cómo renderizar el contenido. Las directivas de modo estándar se muestran en el modo de estándares de Internet Explorer 7 y las directivas de modo peculiar se muestran en 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 representa el contenido como si fuera mostrado en modo peculiar por Internet Explorer 7, que es muy similar a la forma en que se mostró el contenido en Microsoft Internet Explorer 5.

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

Personalmente, siempre elijo 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 mostrar mi sitio como IE7 vs IE8 o 9. Siempre prefiero la última versión de IE.

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.

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 características admitidas por el modo de borde están limitadas a las compatibles con 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 se deben usar, excepto de forma temporal. Asegúrese de actualizar los sitios que se basan en funciones 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 reelabora para admitir estándares y funciones modernos, tenga en cuenta que está utilizando una característica de transición, que puede no estar disponible en versiones futuras.

Si actualmente utiliza el encabezado compatible con x-ua para orientar el 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-Compatible metaetiqueta para la versión "Edge" de IE. De Microsoft:

Presentamos el modo de documento Edge "vivo"

Como anunciamos en agosto de 2013, estamos desaprobando 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 de Enterprise. Con los nuevos cambios arquitectónicos, estos modos de documentos heredados estarán aislados de los cambios en el modo Edge "vivo", lo que ayudará a garantizar un nivel de compatibilidad mucho mayor para los clientes que dependen de esos modos y nos ayudarán a avanzar aún más rápido en Edge. . La próxima versión principal de IE seguirá respetando los modos de documentos servidos por los sitios de la intranet, los sitios en la lista de Vista de compatibilidad y cuando se usa solo con el modo Enterprise.

Los sitios de Internet públicos se representarán con la nueva plataforma Edge mode (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 documentos en el futuro.

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

Chrome = 1 Info para IE

También hay chrome=1 que puede usar o usar junto con una de las opciones anteriores, como: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">. chrome=1 es 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 instalado el complemento tienen acceso a las tecnologías web abiertas de Google Chrome y al veloz motor de JavaScript cuando abren páginas en el navegador.

Google Chrome Frame mejora sin problemas su experiencia de navegación en Internet Explorer. Muestra los sitios habilitados con Google Chrome Frame utilizando la tecnología de renderizado de Google Chrome, que le da acceso a las últimas características de HTML5, así como a las funciones de seguridad y rendimiento de Google Chrome sin interrumpir de ninguna manera el uso habitual de su navegador.

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

Pero para que ese complemento funcione, debes usar chrome=1 en el X-UA-Compatible metaetiqueta

Más información sobre Chrome Frame se puede encontrar aquí.

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

Validación:

HTML5:

La página validará usando el W3 Validator solo cuando se usa <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 tienes IE=edge,chrome=1 no 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 hacer esto en el nivel de servidor configurando el encabezado HTTP. Como nota, dice Microsoft, 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).  Ver la respuesta de olibre o La respuesta de Bitinn para más detalles sobre cómo establecer 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 fuertemente recomendada por el equipo de Bootstrap desde al menos 2014, y Bootlint, el linter creado por el equipo de Twbs continúa lanzando un advertencia cuando la etiqueta es omitida El linter distingue entre advertencias y errores, y como tal, la gravedad de omitir esta etiqueta puede considerarse menor.


Para más información sobre X-UA-Compatible ver Microsoft Compatibilidad con documento que define el sitio web.

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

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


1461
2017-07-21 05:22



Utilizar content="IE=edge,chrome=1" Omitir otro X-UA-Compatible modos

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                   -------------------------- 
  • Sin icono de compatibilidad 
    La barra de direcciones IE9 no aparece Botón de vista de compatibilidad 
     y la página tampoco muestra un revoltijo de menús, imágenes y cuadros de texto fuera de lugar.

  • Caracteristicas 
     Esta metaetiqueta es necesaria para habilitar javascript::JSON.parse() en IE8
    (incluso cuando <!DOCTYPE html> está presente)

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

  • Actuación 
     los Motor de renderizado Trident debería correr más rápido en su borde modo.


Uso

En tu HTML

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge significa que IE debería usar la última versión (borde) de su motor de renderizado
  • chrome=1 significa 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 el 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 según lo propuesto por Stef Pause

    server {
      #...
      add_header X-UA-Compatible "IE=Edge,chrome=1";
    }
    
  • Barniz proxy según lo 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 Modo de borde desde IE11

Como notado por Lynda (ver comentarios), el Cambios de compatibilidad en IE11 recomienda Modo de borde:

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 La página MSDN no lo recomienda Modo de borde:

Porque el modo Edge fuerza 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 usar esto para todas las páginas vistas con Internet Explorer.   No hagas esto, ya que X-UA-Compatible encabezado solo es compatible con el inicio   con Windows Internet Explorer 8.

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

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

Como Ricardo explica (en los comentarios a continuación) cualquier DOCTYPE (HTML4, XHTML1 ...) se puede utilizar 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 se ha dado cuenta en una versión anterior de Especificación de modos de documentos heredados:

El modo Edge está diseñado solo para fines de prueba;   no lo use en un entorno de producción.

Es tan confuso Usman Y pensamiento 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" >

Bien ... En el resto de esta respuesta, doy más explicaciones sobre por qué 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 más del 80%. E IE v6 fue considerado como un de facto estándar (80% a 97% de cuota de mercado en 2003, 2004, 2005 y 2006 solo para IE6, más cuota de mercado con todas las versiones de IE).

Como IE6 no estaba respetando Estándares web, desarrolladores tenido para probar su sitio web usando IE6. Esa situación fue genial para Microsoft (MS) ya que los desarrolladores web tenían que comprar Los productos de MS (por ejemplo, IE no se pueden usar sin comprar Windows), y era más lucrativo no cumplir (es decir, Microsoft quería convertirse en el estándar excluyendo otras compañías).

Por lo tanto, muchos sitios solo eran compatibles con IE6, y como IE no cumplía con la norma web, todos estos sitios web no se procesaron correctamente en navegadores compatibles con estándares. Peor aún, muchos sitios requieren solo IE.

Sin embargo, en este momento, Mozilla comenzó el desarrollo de Firefox respetando en la medida de lo posible todos los estándares web (se implementaron otros navegadores para renderizar páginas como lo hace IE6). A medida que más y 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 distribución del mercado de IE disminuía, MS se dio cuenta de que mantenerse estándar incompatible 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 podía 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 agregar 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 aún cumplen 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, nadie sabe ya cómo se implementó el sitio web / la aplicación, el propietario del sitio / aplicación heredado se declaró en quiebra ...

China representa el 50% del uso de IE6 en 2013, pero puede cambiar en los próximos años como La distribución de Linux chino se está transmitiendo.

Ten confianza con tus habilidades web

Si (intenta) respetar el estándar web, simplemente puede usar siempre http-equiv="X-UA-Compatible" content="IE=edge,chrome=1". Para mantener la compatibilidad con los navegadores antiguos, simplemente evite usar las funciones web más recientes: use el subconjunto compatible con el navegador más antiguo que desee. O si desea ir más allá, puede adoptar conceptos como Degradación agraciada, Mejora progresiva y JavaScript discreto. (También puede estar contento de leer ¿Qué debería considerar un desarrollador web?.)

No se preocupe por la mejor representación de la versión IE: este no es su trabajo, ya que los navegadores deben cumplir con los estándares web. Si su sitio cumple con las normas y utiliza moderadamente las características más recientes, por lo tanto, los navegadores deben cumplir con su sitio web.

Por otra parte, ya que hay muchas campañas para matar 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 usa IE6 como el navegador único oficial permitido. Tuve que implementar un sitio web de intranet solo para IE6. Decidí respetar el estándar web pero utilizando 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 con la norma web;)


312
2018-01-20 13:55



La diferencia es que si solo especificas el DOCTYPE, IE Configuración de la vista de compatibilidad prevalecerán. De forma predeterminada, estas configuraciones fuerzan a todos los sitios de intranet a la Vista de compatibilidad independientemente de DOCTYPE. También hay una casilla de verificación para usar la Vista de compatibilidad para todos los sitios web, independientemente de DOCTYPE.

IE Compatibility View Settings dialog

X-UA-Compatible anula la Configuración de vista de compatibilidad, por lo que la página se procesará en modo estándar, independientemente de la configuración del navegador. Esto fuerza el modo estándar para:

  • páginas intranet
  • páginas web externas cuando el administrador de la computadora ha elegido "Mostrar todos los sitios web en la Vista de compatibilidad" como la predeterminada: grandes empresas, gobiernos, universidades
  • cuando involuntariamente terminas en el Lista de vista de compatibilidad de Microsoft
  • Casos en los que los usuarios agregaron 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 tanto el meta etiqueta y el encabezado HTTP están especificados, el meta la etiqueta tiene prioridad.

Esta respuesta se basa en el examen de las reglas completas para decidir el modo de documento en IE8, IE9y IE10. Tenga en cuenta que mirando el DOCTYPE es la última alternativa para decidir el modo de documento.


52
2018-03-25 19:57



Use 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" />

24
2018-02-13 09:25



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

Además de la respuesta correcta, puedes tener esto validado. Como esta metaetiqueta solo está dirigida para IE, todo lo que necesita hacer es agregar un IE condicional.

<!--[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.


22
2018-06-15 14:38



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

enter image description here

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


12
2017-11-05 19:40



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 de apache, segundo para nginx)

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

add_header X-UA-Compatible "IE=Edge,chrome=1";

11
2018-02-27 07:11



<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 comentarios condicionales se usan antes de la metaetiqueta, e. gramo. sobre 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 hacerlo funcionar con comentarios condicionales.

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

REFERENCIA

Desde el Documentación de MSDN:

los X-UA-Compatible [...] debe aparecer en el encabezado de la página web (la sección HEAD)   antes que todos los otros elementos excepto el elemento title y otros meta elementos.


7
2017-09-17 14:03