domingo, 10 de julio de 2011

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

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.

No hay comentarios:

Publicar un comentario