Truco de Css para agregar estilos exclusivos a Internet Explorer

A veces es necesario hacer compatibles nuestros diseños con Internet Explorer, ya sea porque queremos que abarque todos los dispositivos o porque nuestros jefes siguen viviendo en los 90 y todavia conservan en mal habito de usar IE como su navegador predeterminado. No los culpo, debe de ser difícil de deshacerse de estos bonitos iconos de widgets que ocupan la mitad de la pantalla, y como deshacerse de esos pop-ups que nos prometen ser millonarios todos los dias y nos hacen sentir el visitante ganador 1,000,000 del mes!!

De cualquier manera el truco es sencillo y basta saber que se trata de los comentarios condicionales de html, ya que ellos en un inicio fueron diseñados por microsoft para su navegador y solo son soportados por el mismo. Es truco comienza con <!-- como cualquier comentario pero se le agrega el if dentro de los corchetes cuadrados [if condition]

Ejemplo <!-- [if condition]> Tu codigo que corre bien en IE<![end if]--> Notese que solo la primera etiqueta de comentario tiene los dos guiones de igual manera solo la ultima parte de la segunda etiqueta de comentarios lo tiene.

IE Cualquier versión de Internet Explorer

lt IE X Versiones inferiores a X

lte IE X Versiones inferiores o iguales a X 

IE X Solo para la version X 

gte IE X Versiones superiores o iguales a X

gt IE X Versiones superiores a X 

Se puede usar en la cabecera y agregar las reglas juntas de una vez para IE

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

Podemos tambien usar el hack del guion bajo dentro de nuestra hoja de estilo

Por ejemplo

.myDiv{

color:blue;

_color:red; /* Este hack trabaja para todos los IE*/

}

Aunque hay listado de todos los hacks para las diversas versiones

.hacks{ 

color:red; /* All browsers */ 

color:red !important;/* All browsers but IE6 */ 

_color:red; /* Only works in IE6 */ 

*color:red; /* IE6, IE7 */ 

+color:red;/* Only works in IE7*/ 

*+color:red; /* Only works in IE7 */ 

color:red\9; /* IE6, IE7, IE8, IE9 */ 

color:red\0; /* IE8, IE9 */ 

color:red\9\0;/*Only works in IE9*/ 

}

o para la version IE 10 solo se pone una clase en el tag y listo.

De cualquier manera si nos debemos de preocupar porque se vea bien compatible en todo navegador o porque se vea diferente tenemos este sencillo hack, saludos y nos estamos leyendo!!