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

Quizá te pueda interesar >>

41 comentarios

  1. Excelente artículo, me quité un problema de encima, yo tenía el problema en header, el margen del logo afectaba a las versiones anteriores y el menú se movía como 10 px hacia abajo….esto lo probé con el IE 8 con el botón de “Vista de compatibilidad” (se supone que simula versiones anteriores), sin esa vista se veía perfecta la página, igual en Firefox y Chrome pero una vez que presionaba ese botoncito el menú se desplazaba hacia abajo y gracias a este código solucioné el problema, el *html no funcionó, agregué el otro y ese si funcionó, ya dejé los dos por si acaso,….saludos y gracias por el artículo.

  2. EXCELENTE!
    Llevaba unas 2 semanas dándole vueltas al tema, y por culpa del IE6 (y los usuarios poco actualizados) no acababa de mostrarse bien el diseño web que estoy realizando.
    No había manera de alinear DIVs, y gracias al he conseguido meter algúnos px en los margin-top y en los top.
    Gracias y saludos!

  3. Gracias por el aporte con ello no hubiese encontrado la solución, pues la verdad no me funciono con () pero si con () o con () y colocando la etiqueta () después de abrir y cerrar el () ya que con esta declaración mi maqueta se alinea a la izquierda.
    De todos modos gracias por el aporte.

  4. super guay el articulo, pero llegue aqui tratando de encontrar una solucion a mi problema, en la oficina tengo un pc que le instale el ie collection, y resulta que cuando me da opciones a que versiones de ie instalar el 7 y el 8 me aparecen inhabilitados, y como bien comentas en tu articulo los mas importantes a testear actualmente son el 6 7 y 8, alguien sabe porque puede ser?
    felicitaciones por el articulo…

  5. ALGUIEN SABE SI HAY ALGUN TRUQUITO COMO ESTOS PARA LAS CSS PERO PARA EL RESTO DE LOS NAVEGADORES HABITUALES, COMO SAFARI,CHROME, OPERA, FOREFOX?

  6. Hey amigo, muchas gracias por el aporte, que buen aporte, lástima que microsoft haya sacado navegadores tan malos… y lo peor, es que hay PC que todavía lso tienen…. por favor… bueno, saludos !!!

  7. Hola, estoy realizando una web y en Mozilla se ve perfecto pero en Internet Explorer 8 se me mueve todo. He estado revisando varias webs para ver cómo puedo solucionar este problema hasta que llegué a la tuya pero no sé dónde debo colocar el código que detallas líneas arriba. Agradeceré me ayudes un poco con el tema.
    Saludos

  8. Hola
    Soy novato haciendo páginas web y mucho mas te daras cuenta por usar blogspot, bueno la cosa es que agregue un menú deslizable y en firefox, chrome, opera me aparece super bien pero en el caso de IE7 y IE8 (que son los únicos que he probado de ellos) me los desfigura horriblemente, y pues no comprendo como o donde meter lo que mencionas siendo blogspot.

    Saludos y gracias de antemano =)

  9. Hola me gusto mucho tu articulo pero tengo aun el problema de la incompatibilidad con Ie8 , este es parte de mi código:

    #cuerpo{
    width:988px;
    height:2000px;

    margin-left:auto;
    margin-right:auto;
    background-color:white; /*rgb(21,21,21)*/
    }

    Debería centrarse como sucede en crhome y mozilla pero en ie hace caso omiso a la posición ademas tengo el problema de los position-relative y la opacidad , te agradecería mucho si me ayudas en este embroyo. Gracias de antemano , saludos!

  10. Tengo problemas de compatibilidad con la posicion de un menu desplagable hecho en dreamweaver cs5 en chrome se ve bien, pero en internet explorer se ven como si estuvieran en otra posicion, alguna sugerencia para solucionar el problema.

  11. Yo les recomiendo que agais vuestras plantillas con xara designer pro 8 o el 7 después las retocais con Dreamweaver cs6 o cs5 hoy en dia no hace falta saber nada del lenguaje php, html, flash o xml flash para hacer una web solprendente .Saludos a todos los que os esmerais tanto x enseñarnos gracias nuevamente sin ustedes todo seria mas dificil

  12. hola quisiera saber como descargo la librería para la compatibilidad de las páginas Web hechas en un programa de joomla con dreamweaver o alguna codificacion tambien para las tilde

  13. Hola Jose Kont, muy bueno tú articulo, pero tengo otra consulta que ojala me pudieses ayudar:
    –> tengo un menú HTML que se ve bien en Explorar 7.0 hacia arriba,también en chrome,firefox, etc.
    –> El problema es que la compañia donde trabajo, aún usa internet explorer 6.0 y el menu se desconfiguro (las sub-opciones del menu, se ampliaron y ocupan la pantalla completa (y ya no, sólo el título de la sub-opción)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *