CSS solo para Internet Explorer

A la hora de maquetar una web con css, uno de los quebraderos de cabeza mayores es conseguir una correcta interpretación de las hojas de estilo por parte de IE (Internet Explorer) en sus distintas versiones, ya que durante demasiado tiempo, el desarrollo de dicho navegador obvió los estándares más básicos.

A continuación os mostramos una serie de trucos o hacks que son de enorme utilidad a la hora de acometer las correcciones pertinentes en un documento css para la correcta visualización de una web en navegadores IE.

Dado un selector, podemos colocar determinados símbolos antes de determinadas propiedades a fin de que lo interpreten sólamente ciertos navegadores:

1
2
3
4
5
6

.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, generalmente el más difícil de gestionar.

Colocando !important después del valor de una propiedad, haremos que dicho valor prevalezca sobre cualquier otro definido en toda la hoja de estilos, con la salvedad de IE6, que no lo soporta. Gracias a ello podremos hacer cosas como la siguiente:

1
2
3
4

.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*/
}

Internet Explorer 6 obvia el !important y asignará al borde siempre el último valor definido en la hoja de estilos.

Seguro que ahora ciertas labores de maquetación se nos harán menos arduas.

• Sistema operativo y browser
• Fuentes Microsoft
• Comentarios Condicionales para IE
• Compatibilizar IE y MOZILLA