En este blog hay varios PNGs con el fondo transparente, pero el Internet Explorer no es capaz de mostrarlas correctamente, básicamente no hace caso a la información del canal alpha (por suerte, en la futura versión 7 del IE Microsoft “innovará” añadiendo esta característica, el problema es que desde hace tiempo está disponible en el resto de navegadores así que innovar, innovar, no innovaran mucho ). No quiero sustituir los PNGs por GIFs, tampoco quiero poner el color de fondo en el PNG para no tener que editar la imagen si algún día me da por cambiarlo. Pero por otra parte, me da rabia que la página no se vea bien con el IE.

Buscando por Google, he encontrado una solución basada en CSS que consiste en configurar los img con la propiedad behavior:

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

Pero la propiedad behavior no es estándar y el CSS no validaba (cosa que quería evitar)

Gracias a Suki_ me he enterado que en eGroupware tienen otro workaround. Mirando el código de la web, he visto que la solución es básicamente igual que la anterior pero esta vez no se basan en CSS sino en ejecutar una función javascript con un onLoad.

Para que el IE pueda mostrar “correctamente” nuestros PNGs con transparencias tenemos que añadir las siguientes líneas en las cabeceras HTML de nuestra web:

<!-- This solves the Internet Explorer PNG-transparency bug, but only for IE 5.5 and higher -->
<!--[if gte IE 5.5000]>
<script src="pngfix.js" type="text/javascript">
</script>
<![endif]-->

y copiar en nuestro servidor web el fichero pngfix.js.

El javascript de pngfix.js recorre todas las imágenes y sustituye las que tienen formato PNG por un span con las dimensiones y el resto de propiedades de la imagen original y utiliza un filtro CSS propio del IE (AlphaImageLoader) para mostrar la imagen aplicándole transparencias. Se tiene que sustituir la imagen original por un span porque, tal y como se puede leer en la documentación del filtro en MSDN, el AlphaImageLoader muestra una imagen con transparencia entre el fondo y el contenido del objeto. Por lo tanto, si el contenido del objeto es una imagen, el contenido taparía la imagen mostrada por el AlphaImageLoader y no veríamos el efecto de la transparencia.

Soy totalmente consciente de que es una chapucilla pero no molesta al resto de navegadores, la página y el CSS siguen validando y, por fin, la web se ve como toca en el Internet Explorer.

Internet