Cómo diferenciar estilos para distintos navegadores en un mismo CSS
Siempre que se maqueta una página con CSS hay que probarla en distintos navegadores, ya que no todos interpretan los estilos de la misma forma. Generalmente, los problemas aparecen con Internet Explorer en sus versiones 6 y 7 (ni hablar de las anteriores).
Para establecer distintos atributos a los estilos para cada navegador se puede utilizar lo siguiente:
.estilo1 {
width: 100px !important; /* Firefox, Safari, Opera, etc */
*width: 101px !important; /* IE7 */
*width: 102px; /* IE6 */
}
El CSS siempre privilegia la última lÃnea que contiene un atributo en caso de que se encuentre duplicado. Pero en este caso, sólo los navegadores IE reconocen los atributos que comienzan con asterisco. AsÃ, todos los demás navegadores interpretarán que el ancho de estilo1 es 100px.
Al usar !important, se indica al navegador que privilegie ese atributo por sobre otros que vengan a continuación y se refieran a lo mismo. Todos los navegadores reconocen esta expresión, salvo IE6. De esta forma, IE7 leerá las dos lÃneas que comienzan con asterisco, pero privilegiará la de ancho 101px.
Por último, IE6 sólo reconocerá la última lÃnea e interpretará que el ancho de estilo1 es 102px.
