Forzar el modo de compatibilidad de IE8 en nuestras aplicaciones

En el post que escribí hace unos días sobre cómo solucionar el problema de los menús de ASP.NET en IE8, comenté que en un futuro post explicaría cómo forzar desde nuestra aplicación que la gente que acceda a la misma con Internet Explorer 8.0 la vea en modo de compatibilidad con Internet Explorer 7.0. Esto es de especial importancia para nosotros si nuestra aplicación no se visualiza bien según los estándares estrictos de CSS 2.1 pero no tenía problemas con la versión anterior de IE.

Dado que, como comentaba en el anterior post, no podemos confiar en que los usuarios vayan a pulsar el botón de compatibilidad si la página se ve mal (simplemente semarcharán o si tenemos mucha suerte intentarán usar Firefox), lo mejor que podemos hacer es forzar de manera transparente para ellos esa compatibilidad.

Para ello disponemos de varias técnicas:

1.- Usar una etiqueta META especial en nuestra página

Si incluimos la siguiente etiqueta META en la cabecera de nuestra página podremos conseguir que el navegador de forma automática y transparente para el usuario utilice el modo de compatibilidad:

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

Ya está. Con esto conseguiremos que, incluso, el agente de usuario del navegador sea como el de IE7, es decir, a todos los efectos el navegador se hará pasar por IE7.

2.- Etiqueta META en todas las páginas

Lo anterior está genial si son una o dos páginas las que presentan problemas. Sin embargo en un sitio Web grande, con decenas o cientos de páginas la cosa ya no es tan interesante pues habría que ir una a una poniendo la cabecera. Para estos casos podemos obligar a que sea la propia infrastructura de ASP.NET la que fuerce la inclusión de la etiqueta en cada una de las páginas. Para ello necesitamos modificar el nodo <system.webServer> dentro del archivo de configuración web.config de nuestra aplicación, así:

El nodo httpProtocol nos permite añadir cabeceras propias a todas las páginas, así como cabeceras de redirección. En este caso añadimos una cabecera normal con la pareja nombre-valor necesaria para forzar la emulación en IE8. Es equivalente a poner en todas las páginas la cabecera META anterior.

3.- Forzar la cabecera de compatibilidad en el servidor

Si quieres forzar que todas las aplicaciones de tu servidor fuercen el modo de compatibilidad, sin tener que ir por cada web.config haciendo lo anterior, puedes incluir dicha cabecera de forma sencilla tanto en IIS 6 como IIS7.

En IIS6 basta con ir a las propiedades de un sitio Web y una vez ahí a la pestaña encabezados:

En IIS 7 es más fácil aún pues se puede establecer para el servidor completo así:

¡Listo!

Si eres de los que programa aplicaciones Web en ASP.NET para Linux o Mac usando Mono, puedes encontrar una guía de la propia Microsoft sobre cómo configurar las cabeceras de compatibilidad para IE8 en Apache.

Algunos detalles más

1.- ¿Y si quiero que ocurra todo lo contrario? Es decir, quiero que siempre se use el modo de compatibilidad total con estándares (es decir modo IE8) aunque el usuario pulse tenga configurado mi dominio para compatibilidad con IE7. Pues se puede hacer lo mismo que he dicho antes pero con esta otra pareja de nombre-valor en una cabecera:

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

2.- ¿Cómo distingo que el navegador que me visita es en realidad Internet Explorer 8 en compatibilidad con IE7?. Claro, la pregunta tiene lógica ya que si hasta el agente de usuario se modifica para reflejar que es IE7, ¿cómo hago? Lo puedo necesitar para estadísticas o lo que sea...

Cuando IE8 hace una petición a una página en modo compatibilidad esta es la cadena que usa como agente de usuario (la real en mi propio equipo)

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 3.5.21022; OfficeLiveConnector.1.1; .NET CLR 3.5.30729; .NET CLR 3.0.30618;

Lo importante a destacar aquí es lo que está en negrita. El fragmento inicial, hasta MSIE 7.0, es lo que indica que es IE7 quien solicita la página. No se distinguiría de una petición hecha con el IE7 real (de hecho en IE8 sólo cambia ese número y pondría MSIE 8.0). Lo que la distingue realmente del IE7 real es la otra negrita de arriba: Trident/4.0.

Trident es el nombre del motor de renderizado de páginas de Internet Explorer 8.0, siendo 4.0 su versión. Si buscamos la palabra Trident sabremos que el navegador es realmente IE8.

¡Espero que te resulte útil!

Comparte este post:

Comentarios

# José M. Aguilar said:

Magnífico post, José.

Un saludo.

Monday, April 13, 2009 4:59 PM
# javy said:

como desactivo el modo de compatibilidad en internet explorer uE 8.5/inernet explorer

ç

Monday, April 27, 2009 7:53 PM
# José M. Alarcón Aguín said:

Javy:

mira el punto 1 de "Algunos detalles más" en el post de arriba :-(

Monday, April 27, 2009 8:26 PM
# Alejandro said:

Magnifico Jose, me ayudo mucho este articulo con una aplicacion ASP.NET que estoy desarrollando y que en modo Debug no me ejecutaba bien el menu.

Gracias y saludos

Monday, April 27, 2009 8:49 PM
# Rosario said:

Excelente!! Mil Gracias.

Saludos.

Tuesday, July 14, 2009 12:47 AM
# Alvaro said:

Excelente, muchas gracias !!!

Saludos.

Saturday, August 15, 2009 12:34 AM
# William said:

Gracias Men, excelente post

Friday, September 4, 2009 12:12 AM
# David Carrascosa said:

Muchas gracias José, me ha salvado de un problemilla :P

Wednesday, December 16, 2009 12:13 PM
# Billy Linares Hernández said:

Gracias Jose, necesitaba algo como esto, porque eso de decirle a los clientes que presionen el botón de compatibilidad no me agrada mucho (muchos nisiquiera encuentran dicho botón)

Wednesday, December 23, 2009 7:06 PM
# oscar said:

COMO HACES LO CONTRARÍO:

DIGO ENTRAS A IE8 PERO POR DEFAULT NO APARECE EL BOTÓN DE COMPATIVILIDAD Y ESTE DA POR HECHO A VISTA DE COMPATIBILIDAD IE7.

ESTO ESTA POR DEFAULT AL INSTALAR EL 8.

MIS SITIOS SE VEN MAL EN EL 7 Y TODOS LOS VEN MAL POR ESTE BOTON DESACTIVADO O INVISIBLE AL INSTALAR IE8

Wednesday, June 29, 2011 5:18 PM
# s_48k said:

Muchas Gracias!!

Tuesday, August 23, 2011 4:27 PM