Hacks CSS para mostrar páginas casi idénticas en Firefox, IE6 e IE7

Cuando escribimos una página utilizando CSS lo normal es encontrarnos con que esa página no se muestra de la misma forma en Firefox que en Internet Explorer 6 ni Internet Explorer 7.

Por ejemplo, la propiedad margin no es interpretada de la misma forma en los 3 navegadores,  de manera que cuando logramos que un elemento se muestre correctamente en uno de ellos, en los otros aparece descolocada. Firefox interpreta margin en relación con los elementos padre del mismo, mientras que IE7 lo interpreta en relación a los elementos del mismo nivel.

Este pequeño truco nos permitirá escribir diferentes atributos para cada uno de los navegadores antes mencionados, así como para mostrar diferencias deliberadamente según el navegador:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

/* Clase para Firefox */ 
.elemento { 
margin: 10px 10px 10px 10px; 
background-color: #f00; 
} 
 
/* Clase para IE7 */ 
*:first-child+html .elemento { 
margin: 5px 5px 5px 5px; 
background-color: #0f0; 
} 
 
/* Clase para IE6 */ 
* html .elemento { 
margin: 2px 2px 2px 2px; 
background-color: #00f; 
}

Si asignamos esa clase a un elemento, por ejemplo <div class=”elemento”>, cada navegador tomará la que le corresponde (mostrando, en este caso, un fondo rojo en firefox, un fondo verde en IE7 y un fondo azul en IE6). Como se puede observar, cada navegador aplicará tambien diferentes margenes al elemento, de formas que podemos corregir las diferencias de posición que pudiese haber.