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.