Diseñar en CSS para Firefox, IE6 e IE7

Realizando modificaciones en un css me tope con el siguiente problema mi css no funciona bien para IE6 IE7 Y FIREFOX. 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 encontre con un excelente artículo titulado Two CSS Hacks for identical pages on FF, IE6 & IE7. 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.