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
41 comentarios
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.
Muchisimas gracias , de verdad tenia mas de 5 horas bucando la solución usando wordprees !!!
Que bien que te haya resultado útil 🙂 Saludos amigo!
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 !!!
Jajaja, IE es el dolor de cabeza pero ni modo ha seguirlo aguantando todavía por un buen tiempo 🙂
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
Hola Ohdile:
La metaetiqueta la añades entre las etiquetas
para que funcione el renderizado cómo IE 7.Saludos! 🙂
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 =)
@ Ramon: Dicho código lo debes añadir entre las etiquetas «head», es decir en donde van los metadatos.
Saludos cordiales 🙂
Muy util el articulo enhorabuena!
Solo le faltaria añadir IE 9
; )
Muchas gracias
@ Uridrudi: Gracias, que bien que aún sea un artículo útil. Saludos! 🙂
Muy útil el artículo muchas gracias! Alguna idea para que funcionen los márgenes negativos en IE6??
hola, arme este sitio, http://www.quintocolor.com.ar, en firefox y chrome andan perfecto, en explorer me pone funciona mal el menu, y otro sitio que tengo es http://www.multipap.com.ar, que en explorer aparece todo en negro y nada mas, alguen me puede ayudar? gracias!!!
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!
disculpa era de los position fixed!
cuanto tiempo buscando algo así… gracias, has puesto fin a muchos de mis problemas xDDDD
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.
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
Gracias por el tutorial me sirivio muchisimo
Muchas gracias por el tutorial, me sacó de un gran problema y me dió una herramienta excelente.
hey men como lo descargo dame una pauta
Felicidades excelente articulo.
Gracias.
Gracias Carlos, Saludos!! 🙂
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
mi problema es que me anda el google come pero no me andas en internet explorer y es el que yo quiero usar
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)
Hola Ariel, lamento no ayudarte más en este tema pero ya más de los tips que doy en la nota no se que otra cosa se podría hacer.