peivem.com cerrará sus puertas
Esta entrada ha sido publicada en mi nuevo blog, en:
http://www.sebastianbarria.com/web/pngs-transparentes-en-ie6/
Por favor, visita mi nuevo sitio, porque este lo daré de baja muy pronto. Gracias!

Introducción

Existen dos tipos de problemas con los archivos PNG en Internet Explorer 6:

1. Cuando el PNG se utiliza como imagen (img src...)
2. Cuando el PNG se utiliza como fondo de un DIV.

En ambos casos, es necesario aplicar algún fix para IE6. Hablo de "en ambos casos" porque cada uno de ellos se debe tratar de manera independiente.

Acá están las soluciones para ambos casos.

Como vimos en otro post, lo primero que se debe hacer es incluir los archivos necesarios para Internet Explorer 6. Para esto, dentro de la etiqueta head hay que escribir el siguiente código:

<!--[if IE 6]>
    <link href="css/ie6.css" rel="stylesheet" type="text/css" media="all">
    <script type="text/javascript" src="js/ie6.js"></script>
<![endif]-->

Con estas lineas de código, detectamos si el navegador es IE6. En ese caso, le decimos que cargue los archivos ie6.css e ie6.js.

Caso 1: PNGs como imágenes

Para las imágenes del tipo png, se carga el archivo ie6.js. Este archivo contiene solamente una función que sirve para corregir los PNG. El siguiente es el código:

/* FIX PARA EXPLORER 6 *******************/
function PNG_loader() {
   for(var i=0; i<document.images.length; i++) {
      var img = document.images[i];
      var imgName = img.src.toUpperCase();
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
         var imgID = (img.id) ? "id='" + img.id + "' " : "";
         var imgClass = (img.className) ? "class='" + img.className + "' " : "";
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
         var imgStyle = "display:inline-block;" + img.style.cssText;
         if (img.align == "left") imgStyle += "float:left;";
         if (img.align == "right") imgStyle += "float:right;";
         if (img.parentElement.href) imgStyle += "cursor:hand;";
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
            + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
            + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>";
         img.outerHTML = strNewHTML;
         i--;
      }
   }
}
window.addEvent('domready', PNG_loader);
/*****************************************/

La gracia es que basta con cargar este archivo y se corrigen de inmediato todas las imágenes PNG que han sido incrustadas en la página.

Caso 2: PNGs como fondos

El archivo ie6.css se usa para corregir los divs que tienen un PNG como background.

Para cada DIV que contenga un background con PNG se debe escribir el siguiente código:

#fondo_png{
	background-image: none !important; 
	filter: none !important;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/img/nombre_del_archivo.png);
}

Lo único que hay que hacer es reemplazar la ruta del background donde dice "src=" por la ruta ABSOLUTA de la imágen.

Lo que si se debe tener en consideración es que #fondo_png{ background: url(img/nombre_del_archivo.png); } debe estar definido en nuestro archivo principal de CSS. El archivo ie6.css es un archivo adicional, que SOBREESCRIBE esa parte del estilo.

Algo más...

Utilizando estos dos métodos es posible corregir todos los PNGs en nuestros sitios web.

Existen otros métodos. Algunos más fáciles, otros más complejos, pero estos son los que he usado yo por mucho tiempo, y puedo ASEGURARLES que funcionan en el 100% de los casos.