Hack css para IE

Luego de buscar encontré lo cometido, y siempre el actor principal de la pelicula es IE, ya que si no fuera por el no tendría que estar validando toda cosa en el sistema web, es por ello que de manera muy práctica existe una forma de validar nuestros estilos para cada navegador IE.

Para mi caso necesito validar la conexión desde computadoras que aun usan XP y estas tienen navegadores ie7 a ie8, entonces tenemos:

#mi_caso{

_color: white; /* para IE < IE 7 */

*color:white; /* para IE7 */

color: white\0/; /* a IE8 */

color: white; /*para cualquier otro navegador estandar que no sea IE*/

}

Es así que fácilmente solucionamos problemas que nos costaron mucho tiempo acomodar.

Múltiples Imágenes CSS3 en IE8,6

Mas de uno ha tenido problemas de compatibilidad con el navegador IE, el cual me daba problema con los estilos CSS3, para las versiones inferiores al IE9(la cual cuenta con algunas de las nuevas funciones).

La función que necesitaba trabajar es cargar múltiples imágenes en un solo elemento, es así que encontré una librería interesante que puede beneficiar a muchos con esta misma función. Se trata del proyecto CSS3 PIE, cuyas librerias la pueden descargar del siguiente Enlace.

Para usarlo tenemos que definir la libreria descargada en estilo que estamos definiendo:

#myElement {  
...       
behavior: url(PIE.htc);
}

Permite hacer uso de las funciones:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

A continuacion mostramos la forma en como debemos usarla para el caso que necesito con respecto a imágenes resaltado de color rojo, y el resto de definiciones me indican la forma en como se define comúnmente para el resto de navegadores:

#myElement {
background: url(bg-image.png) no-repeat #CCC; /*non-CSS3 browsers will use this*/
background: url(bg-image.png) no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
background: url(bg-image.png) no-repeat, -webkit-linear-gradient(#CCC, #EEE); /*new webkit*/
background: url(bg-image.png) no-repeat, -moz-linear-gradient(#CCC, #EEE); /*gecko*/
background: url(bg-image.png) no-repeat, -ms-linear-gradient(#CCC, #EEE); /*IE10 preview*/
background: url(bg-image.png) no-repeat, -o-linear-gradient(#CCC, #EEE); /*opera 11.10+*/
background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*future CSS3 browsers*/
-pie-background: url(bg-image.png) no-repeat, linear-gradient(#CCC, #EEE); /*PIE*/
}

No olvidar incluir la libreria PIE.htc, para mas información visitar la pagina oficial del proyecto.