Bicosyes - since evermore…

Imágenes png transparentes en IE

Publicado por blaxter - 17 Jul 2008 a las 23:24

El "amado" Internet Explorer, ese navegador que tantas horas de diversión nos ha dado, no soporta imágenes png transparentes en sus versiones inferiores a la 7 (¿me lo dices o me lo cuentas?). Y aunque algunos traten de ignorar ya a IE6, sigue siendo un porcentaje inmenso que no se puede ignorar (aunque le quedan par de años como mucho), al menos para aplicaciones y páginas Web públicas.

Este problema se puede resolver fácilmente con los behavior de IE, que básicamente es una forma de ejecutar código (javascript) asociado al selector css en cuestión.

Mediante el uso del filtro AlphaImageLoader podemos mostrar imágenes que tengan zonas transparentes. La forma para resolver el problema consiste en sobreescribir todas las imágenes png con una imagen gif transparente (los cuales si son soportados) y aplicarle este filtro con la imagen real que queríamos mostrar. Esto sería algo así como:

Todo esto lo podemos realizar únicamente añadiendo un behavior el cual hará todo de forma automática. El uso sería algo así como:

img {
behavior: url("iepngfix.htc");
}

Podemos poner esto en un css específico para IE, usar unos condicionales y nos queda ya hasta elegante:

Por lo que, en resumen, necesitaremos lo siguiente:

ie.css
iepngfix.htc

gif transparente
Añadir el ie.css de la forma indicada anteriormente

La imagen transparente gif podemos ponerla en cualquier lado de la aplicación si editamos el htc (o si definimos en javascript una variable tal que var blankSrc = "/foo/bar/trans.gif";, pero mejor la otra opción).

Por cierto, otro hack, para IE, similar y realmente útil es este con el cual podemos usar la pseudo clase :hover en más elementos aparte de <a>.

Fuente