Diseñar en CSS para Firefox, IE6 e IE7

En el diseño del futuro nuevo tema de este blog nos hemos encontrado con un problema, que imagino tienen todos los diseñadores: las páginas y estilos CSS no se muestran de igual forma en Firefox, Internet Explorer 6 e Internet Explorer 7. Lo que en Firefox queda como la seda suele aparecer bastante descolocado en Internet Explorer 6 y con algunas diferencias en Internet Explorer 7.

Buscando una solución nos hemos encontrado con un excelente artículo titulado Two CSS Hacks for identical pages on FF, IE6 & IE7. Hemos aplicado las soluciones propuestas en él y han funcionado perfectamente. No se si son la manera más ortodoxa de hacerlo, pero funcionan. Consisten en lo siguiente:

1. Realizar el diseño para Firefox

2. 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 leera el primer #MyDiv, IE6 sólo leerá el segundo.

3. 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.

Con esta técnica podemos diseñar hojas de estilo únicas para los tres navegadores, sin complicarnos con otras técnicas más dificiles para los que no somos expertos en la materia.