En algunas ocasiones conseguir que una web se vea correctamente en todos los navegadores puede resultar un verdadero infierno. Para solucionar los diversos problemas de estandares y compatibilidades podemos optar por usar diferentes hojas de estilo dependiendo del navegador.
A continuación podeis ver un ejemplo:
<!--[if gte IE6]>
<link rel="stylesheet" type="text/css" href="styles/ie.css" />
<! [endif] -->
Otra forma de aplicar distintos estilos a una web en función del navegador es haciedo esta diferenciación dentro de la hoja de estilo, en este caso podemos ver varios ejemplos de como hacerlo.
#something { color: red; } /* Se aplica a IE6 y superior. */
*+html #something { color: green; } /* Se aplica a IE7. */
* html #something { color: blue; } /* Se aplica a IE6. */
margin-left: 5px; /* Margen izquierdo para todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */
Por último podemos recurrir a otro pequeño truco, si en nuestra hoja de estilos añadimos una propiedad y le anteponemos '//' internet explorer si que interpretara esta propiedad pero el resto de navegadores no.
#nonie{//display: none;}
#iebased{
display: none;
//display: visible;
}
En esta caso si tuvieramos dos Div´s como los siguientes :
<div id="nonie"> Tu <i>no estas</i> utilizando Internet Explorer. </div>
<div id="iebased"> Tu <b>estas</b> utilizando Internet Explorer. </div>
En este caso solo veriamos la capa correspondiente en función del tipo de navegador que usemos.
Este ultimo truco no es demasiado elegante pero si muy funcional.
