A pesar de los deseos de todos aquellos que hacemos sitios web, el internet explorer 6 sigue vivo y resistiendo los esfuerzos por jubilarlo.  Así es como muchas veces nos encontramos luchando y perdiendo mucho tiempo para lograr que los sitios desarrollados sean interpretados correctamente por este navegador.

Entre otros tantos problemas que provocaba esta versión (y las anteriores) estaba el manejo de las imágenes en formato PNG con transparencia, ya que al no ser interpretadas correctamente, se muestran con un fondo gris y completamente opaco. Afortunadamente, desde la versión 7 en adelante, los archivos PNG son interpretados correctamente, y gracias a esta pequeña gran solución de la gente de TwinHelix podemos hacer que nuestros sitios sean compatibles hacia atrás (con versiones 6 o anteriores de Ie).

En esta oportunidad, una solución rápida, sencilla y limpia para permitir el uso de imágenes PNG con transparencia y poder así deshacernos definitivamente del formato GIF (con su bajísima calidad y sus bordes recortados), de los Hackss de CSS y los eternos agregados de javascript.

Desde el sitio de TwinHelix se puede conseguir la última versión del archivo necesario para corregir este problema en Iexplorer. Es recomendable descargarlo desde ahí ya que lo actualizan continuamente.

El archivo en cuestión es el iepngfix.htc que contiene las instrucciones para agregar compatibilidad con imágenes PNG “casi nativa” a las versiones antiguas del iexplorer sin tener la necesidad de modificar el código HTML.

Cómo funciona?

  1. Solamente es necesario llevar los archivos iepngfix.htc y blank.gif a la estructura de nuestro sitio web.
  2. Luego hay que copiar y pegar este código dentro del HTML que llame a las imágenes con transparencia o dentro de la hoja de estilos Css:
  3. 
    
  4. Los selectores CSS que contengan las imágenes PNG (img, div, span, etc) se pueden agregar separados por coma (,) y la ruta de la url debe ser relativa al documento que la llama y no a la hoja de estilos.
  5. En el caso de que la imágen blank.gif  se encuentre en algún subdirectorio (p.ej. /imagenes/) es necesario indicarlo en la línea 16 del archivo iepngfix.htc de la siguiente forma:
  6. IEPNGFix.blankImg = '/imagenes/blank.gif';

Luego de la ultima actualización de este script, existen muchas otras opciones para agregar compatibilidad con las versiones de CSS1 background-repeat y background-position, y todas están muy bien explicadas en la ayuda, por eso es recomendable descargar siempre la última versión y leer los ejemplos que vienen incluídos.

Descargar Demo