septiembre 14, 2009 Accesibilidad, Varios, Web/Internet
Son tres dolores de cabeza los que tienen quienes se dedican a diseñar sitios web:
- IE 6
- IE 7
- 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
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.
@ Carlos:
Gracias por el comentario, siempre es agradable saber que el tutorial esta cumpliendo su objetivo. Saludos cordiales!
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!
@ Christian:
Hola, gracias por tu comentario. Realmente la gente debería de migrar del IE6 a un mejor navegador porque nos harian la vida más fácil. Saludos!!
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.
gracias amigo
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…
ALGUIEN SABE SI HAY ALGUN TRUQUITO COMO ESTOS PARA LAS CSS PERO PARA EL RESTO DE LOS NAVEGADORES HABITUALES, COMO SAFARI,CHROME, OPERA, FOREFOX?
Mlo: Esos programas a veces no te muestran en realidad como se veran las páginas en dichos navegadores. Lo mejor si quieres por ese metodo seria evaluar con el IE Tester.
Saludos!!
el ie tester es fiable 100% con respecto a como se vera luego?, que tal el iecollection? saludos desde madrid.