Solucionar problemas de compatibilidad CSS en Internet Explorer 8, 7 y 6

Son tres dolores de cabeza los que tienen quienes se dedican a diseñar sitios web:

1. IE 6
2. IE 7
3. IE 8

* IE representa Internet Explorer.  En fin, esta tarde me toco retocar algunos formularios y tablas de datos de un sitio, resulta que al final cuando creí que todo estaba bien evalúe en IE6, IE7, Firefox, Chrome, Safari y Opera. A pesar que algunas cosas no eran 100% idénticas entre dichos navegadores, todo parecía ir bien.

Al llegar a la reunión con los clientes, empece a evaluar el sitio y zass cual va siendo mi sorpresa que las cosas no se miraban “tan bien”. Desconcertado vi el navegador y era el único que no se me ocurrió evaluar: IE8. Les digo que si han resuelto los problemas para IE6, el 7 no estén tranquilos, porque el 8 es igual de aterrador.

He pasado unas cuantas horas tratando de resolver estos problemas de alineación y  gracias a Dios que al fin pude encontrar la solución. Les enumero algunas cuantas a manera de:

Top 3 de soluciones a problemas con CSS e Internet Explorer 6, 7 y 8

a) Diseñar cumpliendo los estándares, es decir evaluando en Firefox. Comprobar los fallos que el diseño muestra en IE6. Identificar los selectores que presentan el problema y duplicarlos, anteponiendo a la copia el selector *html y aplicando los cambios requeridos, de la siguiente manera:

#MyDiv {margin: 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

De ese modo, mientras Firefox leerá el primer #MyDiv, IE6 sólo leerá el segundo.

b) Hacer lo mismo con IE7. Volver a duplicar los selectores en conflicto y añadir *:first-child+html a los duplicados:

#MyDiv {margin : 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {margin : 5px 5px 5px 5px;}

/* IE7 Only */
*:first-child+html #MyDiv {margin : 2px 2px 2px 2px;}

Así, IE7 sólo leerá el último selector.

c) Para IE8 primero tenemos que comprobar que todo ande bien en IE7 ya que la solución será emular este navegador. Para realizarlo simplemente añadimos la siguiente meta-tag:

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

Si nuestra página se ve bien en Explorer 7, es un buen método para que se nos vea bien en Explorer 8.

Tener todas las versiones de IE instaladas

Para poder comprobar si el diseño se mira bien o no tenemos que tener dicho navegador. Existe una utilidad muy simpática llamada “Internet Explorer Collection” que incluye desde la versión 1 hasta la 8. Esta aplicación también incluye una herramienta para desarrolladores del tipo “Firebug”.

Enlace para descargar: IE Collection

Lamentablemente testear en IE es un mal necesario (aún) ya que en países como Guatemala más del 60% de personas aún lo utilizan como navegador principal, aunque con los esfuerzos de Google por posicionar Chrome quizá ya no sea una Utopía pensar en un mundo donde se respeten los estándares web…  Saludos!!

Visto en | La brujula Verde y NotasWeb