Usar CSS sólo para Internet Explorer

Cuando eres principiante en lo del diseño y te toca maquetear una web puede que pases días rompiéndote la cabeza para  conseguir una correcta interpretación de las hojas de estilo por parte de IE (Internet Explorer) en sus distintas versiones.

A continuación encontrarán pequeños trucos o hacks para hacer que su web se vea igual en todos los navegadores, algo que todos queremos.

El truco consiste en colocar determinados símbolos antes de las propiedades que estamos colocando con la finalidad que sean interpretadas de manera correcta y la visulización sea la misma tanto en Firefox, Chrome o IE, que es el que más problemas da.

.capa{
	border: 5px; /*Todos los navegadores tomarán 5px de borde para la capa*/
	*border: 3px; /*Todas las versiones de IE tomarán 3px de borde para la capa*/
	.border: 3px; /*Todas las versiones de IE tomarán 3px de borde para la capa*/
	_border: 10px; /*Solo IE6 interpretará éste valor, los demás no lo leerán*/
}

Además, podemos hacer uso de la palabra clave !important para “engañar” a IE6, que de todos los IE, es el que más dolores de cabeza da.

Colocando !important después del valor de una propiedad, estamos estableciendo que dicho valor prevalezca sobre cualquier otro definido en la hoja de estilos, empero, IE6, que no lo soporta, lo pasará por alto, lo que nos deja el camino libre para una línea abajo, decirle que queremos que interprete

.capa{
	border: 5px !important; /*Todos los navegadores asignarán 5px al borde de la capa*/
	border: 7px; /*IE6, sobreescribirá el valor anterior con el nuevo de 7px*/
}

Explicación, IE6 obvia el !important y asignará al borde siempre el último valor definido en la hoja de estilos.