X-UA-Compatible está configurado en IE = edge, pero aún no detiene el modo de compatibilidad

247

Estoy bastante confundido Debería poder configurar

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

e IE8 e IE9 deberían renderizar la página usando el último motor de renderizado. Sin embargo, acabo de probarlo, y si el Modo de compatibilidad está activado en otra parte de nuestro sitio, permanecerá encendido para nuestra página , aunque deberíamos obligarlo a no hacerlo.

¿Cómo se supone que debe asegurarse de que IE no use el modo de compatibilidad (incluso en una intranet)?

FWIW, estoy usando la declaración HTML5 DocType ( <!doctype html>).

Aquí están las primeras líneas de la página:

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="innerpage no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="innerpage no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="innerpage no-js ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="innerpage no-js"> 
<!--<![endif]--> 
    <head> 
        <meta charset="ISO-8859-1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

EDITAR: Acabo de enterarme de que la configuración predeterminada en IE8 es usar el modo de compatibilidad IE7 para sitios de intranet. ¿Esto anularía la metaetiqueta compatible con X-UA?

internet-explorer  ie8-compatibility-mode  x-ua-compatible 
— Kerrick
fuente
También tengo este problema con algunos de mis usuarios, ¿alguna vez lo resolviste? Sin embargo, mi aplicación no es intranet. Y solo como el 20% de los usuarios lo obtienen, curiosamente.
— Kevin
2
Esto podría ser el resultado de su divertido marcado de etiqueta <html> (el material <! - [if lt IE 7]>). Intente eliminarlo y vea si funciona. Vea esta pregunta SO stackoverflow.com/questions/10682827/…
— Sunday Ironfoot
13
@SundayIronfoot FYI, el marcado divertido de la etiqueta <html> al que te refieres son comentarios condicionales de IE que se usan para agregar una clase CSS al elemento <html> para la versión apropiada de IE (si corresponde) para que puedas diseñar las cosas de manera diferente según sea necesario para las versiones de IE simplemente prefijando su declaración de estilo con ".ie7", como: .ie7 p {ancho: 200px; } ... es una solución más limpia para resolver problemas en versiones anteriores de IE que tener que usar algunos de los hacks CSS como * width o _width. Los navegadores que no sean IE lo ignorarán y solo usarán el básico.
— Tim Franklin

Respuestas:

261

Si necesita anular la configuración de Vista de compatibilidad de IE para sitios de intranet, puede hacerlo en web.config (IIS7) o mediante los encabezados HTTP personalizados en las propiedades del sitio web (IIS6) y establecer allí X-UA-Compatible. La metaetiqueta no anula la configuración de la intranet de IE en la Configuración de Vista de compatibilidad, pero si la configura en el servidor de alojamiento anulará la compatibilidad.

Ejemplo para web.config en IIS7:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=EmulateIE8" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Editar : eliminé elclear código justo antes de add; fue un descuido innecesario al copiar y pegar. Buena captura, comentaristas!

— Tim Franklin
fuente
55
Sin embargo, solo una nota ... Si está desarrollando utilizando el servidor web de desarrollo de Visual Studio incorporado (también conocido como Cassini), entonces esto no funcionará porque Cassini no respeta la sección <system.webServer> de la web. config. Entonces, para el desarrollo, use IIS Express en su lugar.
— James Messinger
1
¿Cuál es la razón de la <clear />? ¿Qué encabezados personalizados se borran con esto?
— M4N
El claro parece eliminar la <urlCompression...>regla al menos para mí. Esa regla hace gzip, lo que sí quiero, así que comenté claramente. Cualquier otra información sería encantadora.
— Nenotlep
Eliminé el 'clear' - buena captura, era una línea innecesaria de copiar y pegar desde mi implementación.
— Tim Franklin
14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
— Nux
183

La solución del lado del servidor es la recomendada, como propuso @TimmyFranks en su respuesta, pero si uno necesita implementar la X-UA-Compatibleregla en el nivel de página, lea los siguientes consejos, para beneficiarse de la experiencia del que ya se quemó

La X-UA-Compatiblemetaetiqueta debe aparecer inmediatamente después del título en el <head>elemento. No se pueden colocar otras metaetiquetas, enlaces CSS y llamadas a scripts js antes.

<head>
    <title>Site Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <script type="text/javascript" src="/jsFile.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" />
    <link rel="shortcut icon" href="https://stackoverflow.com/apple-touch-icon.png" />
</head>

Si hay algún comentario condicional en la página (digamos que se encuentra en el <html>), debe colocarse debajo de, después de <head>.

// DON'T: place class inside the HTML tag 
<!--[if gt IE 8]><!--> 
    <html class="aboveIe8"> 
<!--<![endif]-->

// DO: place the class inside the BODY tag
<!--[if gt IE 8]><!--> 
    <body class="aboveIe8"> 
<!--<![endif]-->

El equipo de Html5BoilerPlate escribió sobre este error: http://h5bp.com/i/378 Tienen varias soluciones.

Con respecto a la vista de Intranet y compatibilidad, hay configuraciones cuando va a herramientas> Configuración de la vista de compatibilidad.

Configuración de la vista de compatibilidad

— neoswf
fuente
1
He probado otras 4 o 5 respuestas en Stack Overflow, y solo esta combinación específica funcionó para mí. Para cualquiera que use WordPress y un complemento de SEO, tenga cuidado con el complemento que reescribe el <título> en otra ubicación. Editar: Comentario agregado de WordPress
— Mike Ebert
66
X-UA-Compatibledebería aparecer lo antes posible, probablemente despuéscharset . No creo que sea cierto que "deba aparecer inmediatamente después del título".
— sam
Esta recomendación es el resultado de sufrir bajo IE. Ganado por la sangre. ¿Quién dice que IE sigue las pautas?
— neoswf
44
Wow, esto funcionó para mí y tener mis metaetiquetas justo después de la etiqueta del título es lo que funcionó. Ojalá no fuera tan arcaico hacer que esto funcione ...
— theJerm
La X-UA-Compatibleetiqueta meta puede aparecer después title, basey cualesquiera otras etiquetas meta sin perder su efecto. Esto es lo que probé en IE8. Sin embargo, no se pueden poner comentarios condicionales.
— Rockallite
37

Tenga en cuenta que si lo está sirviendo desde PHP, también puede usar el siguiente código para solucionarlo.

header("X-UA-Compatible: IE=Edge");
— TJ L
fuente
44
Esto funciona mejor que agregar la metaetiqueta, ya que pasa la validación W3C usando este método y es mucho más fácil que un truco .htaccess.
— Talvi Watia
2
Intenté todo lo demás, y esto fue lo que finalmente funcionó. Gracias.
— Jason
2
Para aquellos en WordPress, esto puede ayudar: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
— ambiguousmouse
¡Esto funciona mucho mejor también cuando se construye un sitio enorme dependiendo <!--[if lt IE 7 ]> <html>...! ¡GRACIAS! ¡Eres un dios enviado!
— OZZIE
2
@sunskin - Cualquier encabezado enviado por PHP DEBE suceder antes de enviar cualquier salida a la página, es decir, antes de que PHP o datos sean enviados por PHP.
— TJ L
25

Como resultado, esto tiene que ver con la elección "inteligente" de Microsoft para hacer que todos los sitios de intranet forcen el modo de compatibilidad, incluso si X-UA-Compatibleestá configurado como IE=edge.

— Kerrick
fuente
32
Eso no es cierto. El X-UA-Compatible anulará la configuración del modo de compatibilidad. Sin embargo, a veces el uso de la metaetiqueta no funciona porque el modo ya se ha establecido en el momento en que lo encuentra. Es por eso que uso la versión de encabezado HTML, para que el navegador pueda habilitar el modo estándar al principio del proceso.
— Erik Funkenbusch
3
Agregando al comentario de Mystere Man, puede anularlo desde el servidor de alojamiento utilizando web.config o los encabezados http personalizados en IIS. Vea mi publicación anterior para más detalles.
— Tim Franklin
77
He intentado esto varias veces y no anula todos los sitios de intranet forzados al modo de comparabilidad.
— Maess
@Mystere Man: Definir a veces como cuando la página está en un iframe, donde el documento principal no define XUA-COMPAT, y el modo del documento se hereda de la página principal (otra opción de MS muy inteligente).
— Stefan Steiger
1
@Kerrick: Esta no es la respuesta correcta. Vea la respuesta a continuación en tj111 para obtener la respuesta correcta.
— degenerado
9

También tuve el mismo problema de representación de IE9 en los estándares de documento de IE7 para el host local. Intenté muchas etiquetas de comentarios condicionales pero no tuve éxito. Al final, simplemente eliminé todas las etiquetas condicionales y solo agregué metaetiquetas inmediatamente después de la cabeza como a continuación y funcionó a las mil maravillas.

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

Espero eso ayude

— Pramod
fuente
7

Incluso si ha desmarcado la opción "Mostrar sitios de intranet en Vista de compatibilidad", y tiene el X-UA-Compatible en sus encabezados de respuesta, hay otra razón por la cual su navegador podría predeterminar a "Vista de compatibilidad" de todos modos: su Política de grupo. Mira tu consola para el siguiente mensaje:

HTML1203: xxx.xxx se ha configurado para ejecutarse en Vista de compatibilidad a través de la Política de grupo.

Donde xxx.xxx es el dominio de su sitio (es decir, test.com). Si ve esto, la política de grupo para su dominio se configura de modo que cualquier sitio que termine en test.com se muestre automáticamente en modo de compatibilidad, independientemente de doctype, encabezados, etc.

Para obtener más información, consulte el siguiente enlace (explica los códigos html): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx

— rshadman
fuente
5

Como NEOSWF señala anteriormente, los comentarios condicionales de Paul Irish impiden que la metaetiqueta tenga algún efecto.

Hay varias correcciones todas aquí ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Éstos incluyen:

Agregar dos clases HTML, usar encabezados de servidor y agregar un comentario condicional sobre el doctype.

En mi último proyecto, decidí eliminar los comentarios condicionales de Paul Irish. No me gustó la idea de agregar nada antes del html sin hacer MUCHAS pruebas primero y es bueno ver lo que se ha configurado simplemente mirando el HTML.

Al final rodeé un div justo después del cuerpo y usé comentarios condicionales, por ejemplo

  <!--[if IE 7]><div class="ie7"><!--<![endif]-->
  ... regular body stuff
  <!--[if IE 7]></div><!--<![endif]-->

Podría haber hecho esto en todo el cuerpo, pero es más difícil con CMS como Wordpress.

Obviamente es otro DIV dentro del marcado, pero es solo para navegadores más antiguos.

Sin embargo, creo que podría ser una decisión por proyecto.

También he leído algo sobre la metaetiqueta charset que debe aparecer en los primeros 1024 bytes, por lo que esto garantiza eso.

¡A veces las ideas más simples y fáciles de leer son las mejores y definitivamente vale la pena pensar en ellas! Gracias al sexto comentario en el enlace de arriba por señalar esto.

— usuario1010892
fuente
5

X-UA-Compatiblesolo anulará el modo de documento, no el modo de navegador, y no funcionará para todos los sitios de intranet; Si este es su caso, la mejor solución es deshabilitar "Mostrar sitios de intranet en Vista de compatibilidad" y establecer una configuración de directiva de grupo para especificar qué sitios de intranet necesitan el modo de compatibilidad.

— Tony
fuente
5

Agregué lo siguiente a mi archivo htaccess, que funcionó:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
— Metzed
fuente
1
esto funciona cuando la intranet está configurada para compatibilidad. Me llevó mucho tiempo encontrar algo que funcione. especialmente cuando buscas y todo está relacionado
— shorif2000
Esto es asombroso No sabía que podía enviar encabezados con .htaccess
— Alex W
3

Además, X-UA-Compatible debe ser la primera metaetiqueta en la sección de cabecera

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

Por cierto, el orden correcto o las etiquetas principales principales son:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>Site Title</title>
    <!-- other tags -->
</head>

De esta manera

  1. configuramos el motor de renderizado para usarlo antes de que IExplorer comience a procesar
  2. el documento luego configuramos la codificación para usar en todos los navegadores
  3. luego imprimimos el título, que se procesará con la codificación ya definida.
— Leonardo Molina
fuente
2
En realidad, el CHARSET debe preceder al X-UA-Compatible. Ver blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
— EricLaw
1
No tiene que ser el primero, pero sí debe estar cerca de la cima. Puede seguir el título (y el juego de caracteres, como señaló Eric), pero eso es todo.
— Lance Leonard el
en mi caso en nginx solo funcionará si la etiqueta compatible con X-UA es la primera en la sección de cabecera
— Marco Roth el
2

Timmy Franks lo tenía bien para mí. Acabamos de tener el problema hoy en que el cliente tenía IE8 en toda la empresa, y estaba obligando al sitio que escribimos para su intranet a modo de compatibilidad. La configuración de "IE-Edge" parecía solucionarlo.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>
— SouthShoreAK
fuente
1

IE 11 ya no le permite anular la configuración de vista de compatibilidad del navegador enviando el encabezado ...

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

Parece que la única forma de obligar al navegador a no usar la vista de compatibilidad es hacer que el usuario lo desactive en su navegador. El nuestro es un sitio de Intranet, y la opción predeterminada de IE es usar la vista de compatibilidad para los sitios de Intranet. ¡Que dolor!

Pudimos evitar la necesidad de que el usuario cambiara la configuración de su navegador para los usuarios de IE 9 y 10, pero ya no funciona en IE 11. Nuestros usuarios de IE están cambiando a Chrome, donde esto no es un problema y nunca lo ha hecho. estado.

— EricP
fuente
No es que no lo permita, IE11no admite otros modos de compatibilidad que no sean edge. Enlace a la documentación oficial . Eso significa que ya no tenemos que usar esa metaetiqueta para ocultar el botón CM en la barra de direcciones.
— Wallace Sidhrée
44
Falso: IE11 todavía admite todos los modos de compatibilidad heredados.
— EricLaw
@EricLaw, ¿es correcta la respuesta de EricP (que IE11 cambia el comportamiento del encabezado HTTP compatible con X-UA)?
— Matthew Flaschen
@EricP, ¿probaste el encabezado HTTP o solo la versión de etiqueta <meta>?
— Matthew Flaschen
2
@MatthewFlaschen: No, EricP es incorrecto, al igual que Wallace Sidhree (aunque, para ser justos con Wallace, MSDN no explica qué quieren decir con "obsoleto"). Lo que cambió en IE11 es que no hay ningún botón visible de "Vista de compatibilidad" ( technet.microsoft.com/en-us/library/dn321449.aspx ) pero las declaraciones compatibles con X-UA aún se respetan.
— EricLaw
1

Pude evitar esto cargando los encabezados antes del HTML con php, y funcionó muy bien.

<?php 
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>

ix.html es el contenido que quería cargar después de enviar los encabezados.

— usuario3071843
fuente
1

Estaba experimentando el mismo problema en IE11. Ninguna de estas respuestas resolvió mi problema. Después de excavar un poco, noté que el navegador se estaba ejecutando en modo Enterprise . (verifique presionando F12 y haga clic en la pestaña de emulación, busque el menú desplegable del perfil del navegador) La configuración estaba bloqueada, lo que no me permite cambiar la configuración.

Pude cambiar el perfil a Escritorio después de eliminar CurrentVersion de la siguiente clave de registro:

HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet Explorer\Main\EnterpriseMode

Después de cambiar el modo a Escritorio, las respuestas en esta publicación funcionarán.

— jfatal
fuente
1

Cuando su navegador se abre con Modos de compatibilidad, incluso si elimina y apaga la configuración de todos los modos de compatibilidad desde su navegador web y el Editor de políticas de grupo local, puede intentar desactivar desde la clave de registro.

Esto también me sucede al usar el dominio y el subdominio para conectar el lado del servidor. La máquina está restringida a abrir en modo de compatibilidad para todos los subdominios.

DESACTIVAR MODO DE COMPATIBILIDAD PARA INTRANET

HKEY_LOCAL_MACHINE - SOFTWARE - Políticas - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode El valor debe ser 0 (cero) . Y también elimine el nombre de dominio existente de PolicyList.

De lo contrario, puede agregar un nuevo valor (DWORD) que contenga datos de valor 0 (cero) .

— ayciceksamet
fuente
0

Tuve el mismo problema después de probar muchas combinaciones. Tenía esta nota de trabajo. Tengo compatibilidad verificada para intranet. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head runat="server">
— capadleman
fuente
0

Si está utilizando la pila LAMP, agréguelo a su archivo .htaccess en su carpeta raíz web. No es necesario agregarlo a cada archivo PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
— Kevin Smith
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.