No es ningún secreto que Internet Explorer suele interpretar las hojas de estilo... digamos de un modo peculiar. Generalmente recurrimos a parches (hacks) para corregir los errores de IE, pero existe una manera más sencilla y práctica: los comentarios condicionales de IE.

Una gran idea

Microsoft tuvo una excelente idea: una manera de mostrar cierto código a Internet Explorer (versión 5 en adelante, sólo en Windows), pero ocultarlo de otros navegadores, poniéndolo dentro de un comentario. Incluso es posible poner código que sea leido exclusivamente por la versión 5.0, 5.5 o 6. Esto nos permite detectar la versión del browser sin necesidad de usar javascript o algún lenguaje de servidor.

Como funcionan

La estructura básica es un comentario

<!-- --> 

Pero dentro de ese comentario, ponemos una instrucción especial, que hace que IE interprete lo que hay adentro como código y no comentario. Si queremos que algo se vea en IE 5.0, 5.5 y 6, pondríamos:

<!--[if IE]>
[Aquí va nuestro código]
<![endif]-->

Si queremos que algo únicamente se muestre en IE 5.5, nuestra sintáxis sería así:

<!--[if IE 5.5]>
[Aquí va nuestro código]
<![endif]-->

También podemos especificar navegadores mayores o menores que cierta versión. Por ejemplo:

<!--[if gt IE 5.5]>
[Esto se mostrará a versiones posteriores a  

IE 5.5. "gt" = mayor que]
<![endif]-->
<!--[if gte IE 5.5]>
[Esto se mostrará a IE 5.5 y versiones 

posteriores. "gte" = mayor que o igual]
<![endif]-->
<!--[if lt IE 6]>
[Esto se mostrará a  versiones anteriores a 

IE 6. "lt" = menor que]
<![endif]-->
<!--[if lte IE 6]>
[Esto se mostrará a IE 6 y versiones 

anteriores. "lte" = menor que o igual]
<![endif]-->

Dentro de nuestro comentario condicional podemos tener cualquier código. (Si ves esta página en Internet Explorer, verás unos ejemplos abajo.)

Este texto se está mostrando porque tu navegador es Internet Explorer posterior a 5.5

Este texto se está mostrando porque tu navegador es Internet Explorer versión 6 o anterior.

Este texto se está mostrando porque tu navegador es Internet Explorer versión 6. Por cierto, deberías cambiar a un mejor navegador ;)

En vez de utilizar hacks en las hojas de estilo, se pueden poner todas las correcciones en una hoja de estilos separada y ponerse dentro de comentarios condicionales, de esta manera:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

De esa manera los demás navegadores no ven esas correcciones, mantenemos nuestra hoja de estilos limpia y sin parches, y en el remoto caso que una versión futura de Internet Explorer corrija su modelo de cajas y multiples bugs, es muy fácil poder quitar los parches.

También podemos utilizar los comentarios para esconder propiedades exclusivas de Internet Explorer, como por ejemplo, las barras de desplazamiento con color. Son una funcionalidad que, aunque no es esencial, es práctica para los diseñadores. Si separamos esas propiedades de nuestra hoja de estilos principal, y sólo dejamos que Internet Explorer la vea, tenemos código válido y barras de color para IE.

Si sólo queremos una propiedad de css específica para la página en cuestión, también podemos ponerla así:

<!--[if IE]>
<style>
#miregla {
color:#333333;
}
</style>
<![endif]--> 

Podemos también utilizar javascript:

<!--[if IE 6]>
<SCRIPT LANGUAGE="Javascript">
alert("Estás usando Internet Explorer 6");
</SCRIPT>
<![endif]-->

Los comentarios condicionales nos permiten escribir código específico para Internet Explorer sin afectar a otros navegadores. Nos permiten evitar parches y tener código más limpio, válido y estructurado.

Diseñorama
http://www.disenorama.com/tutoriales/css/comentarios_condicionales_pa.htm