Front-End Zen

Problema de transparencia PNG en internet explorer 6 (IE6)

Un desarrollador Front-End tarde o temprano acaba enfrentánose a uno de los múltiples problemas que tiene IE6, y en este caso se trata de las transparencias en las imágenes PNG. Lo normal es recurrir a la alternativa de las imágenes GIF, pero en ocasiones, la calidad no acaba de alcanzar la misma que un PNG. Por suerte, en la actualidad existen distintas librerías que solucionan esta incompatibilidad y nos hacen la vida un poco más fáciles.

Cito algunas de las librerías que he utilizado personalmente y que corrigen la incompatibilidad de Internet Explorer 6 (IE6). Todos ellos son válidos y funcionan a la perfección, por tanto elegir un script es más una elección por gusto que por otra cosa:

PNG fix

Correcto script que habilita las transparencias de PNG en IE6.

http://homepage.ntlworld.com/bobosola/

Unit PNG fix

Otro script que soluciona el problema, esta vez todo en menos de 1kb!
http://labs.unitinteractive.com/unitpngfix.php

SuperSleight

Esta vez un script salido de uno de los sitios web de referencia para todo Front-End o diseñador web.

http://24ways.org/2007/supersleight-transparent-png-in-ie6

IE7-js

Alojado en code.google.com, un script completo que además de corregir el problema de la transparencia, corrige otros problemas con IE6 y versiones anteriores.

http://code.google.com/p/ie7-js/

He probado todas estas librerías y todos hacen más o menos lo mismo:

Le aplica un “filter”  a la imagen (progid:DXImageTransform.Microsoft.AlphaImageLoader(...)). Es un filtro que solo admite IE6 y lo que hace es habilitar las transparencias de la propia imagen.

Cada librería lo aplica a su manera, y su aplicación también varía ligeramente. En mi trabajo actual empecé usando Unit PNG fix pero he acabado usando IE7-js ya que me interesaba el resto del paquete.