Solucionando las deficiencias de interpretación de CSS en Internet Explorer 6 / 7 / 8
A la hora de diseñar con CSS nos encontramos con que nustro sitio se vé distinto según en qué navegador lo vemos. Esto es porque cada navegador interpreta «como quiere/puede» los estilos CSS, ateniendose en mayor o menor grado a la norma estandar.
Internet Explorer (en todas sus versiones) es el naufragador(sic) que menos respeta los estandares y es por eso que causa muchos dolores de cabeza a los diseñadores web, multiplicando su trabajo.
1. Realizar el diseño para Firefox o cualquier navegador que respete estándares.
por ejemplo:
#contenedor { margin: 10px 10px 10px 10px; }
2. Una vez comprobado que el diseño se ve bien, debemos hacer una segunda definición de cada estilo que no se vea bien en IE7, duplicando el estilo y añadiendo *:first-child+html :
#contenedor { margin : 10px 10px 10px 10px; }
/* Solo para IE7 | gracias por hacerme trabajar de más */
*:first-child+html #contenedor { margin : 2px 2px 2px 2px; }
Así, IE7 pisará el primer estilo y mosrará las cosas como queremos, mientras que los
navegadores que leen perfectamente CSS se quedarán con el primero.
Hay otra forma de crear estilos diferenciales, pero no es muy recomendada porque hacen que nuestro código no «valide» como 100% estandar.
por ejemplo:
body {
background: #FFFFFF /* Firefox y los demás */
*background: #000000 /* IE7 e inferiores */
_background: #CCCCCC; /* Sólo IE6 */
}
Otra solución es utilizar una librería javascript que corrige los errores de Internet Explorer en cualquiera de sus versiones, inclusive la 8.
Es muy facil de usar, solo hace falta bajar el archivo de acá , copiarlo dentro de una carpeta /js en el directorio raíz y agregar en el <head> del sitio:
<!--[if lt IE 8]>
<script src="js/IE8.js" type="text/javascript"></script>
<![endif]-->
