Archivos PNG en Internet Explorer 6
Seguro que en más de una ocasión trataste de aprovechar la calidad de las imágenes png en la maquetación de tu diseño, pero te encontrabas con el problema de que al visualizarla en Internet Explorer 6 había un fondo sobre tu imagen, detalle que en la versión 7 y en Firefox por ejemplo no se presenta.
Hoy por hoy existe una solución que no demanda mayor esfuerzo en su aplicación en comparación a otras que ya han sido implementadas. Se trata de un archivo script llamado iepngfix.htc desarrollado por TwinHelix designs.
A continuación muestro un ejemplo utilizando el script mencionado.
Para implementar esta solución en tu website debes hacer lo siguiente:
| 1. | Descarga los archivos del ejemplo desde http://www.rawisjorge.com/png-ie6.zip o los del propio creador, desde este enlace: http://www.twinhelix.com/css/iepngfix/iepngfix.zip |
| 2. | Utilizaremos los archivos iepngfix.htc y blank.gif, ambos en este caso serán copiados al directorio raíz o principal de tu website. Si deseas cambiar la ubicación del archivo blank.gif tendrás que editar el archivo iepngfix.htc justo al final de la línea 14 indicando la ruta de tu preferencia. |
| 3. | Es importante utilizar una hoja de estilos independiente para este caso. Puede ir acompañado por los demás estilos que hayan sido definidos exclusivamente para Internet Explorer 6. El contenido de la hoja de estilos es de solo una línea y es como sigue: img, div { behavior: url(iepngfix.htc); con esto nos aseguramos que las imágenes png utilizadas como parte del contenido o fondo sean reconocidas sin problema alguno. |
| 4. | Ahora debemos validar que esto solo suceda cuando nuestro website sea visualizado a través de Internet Explorer 6, para lo cual añadimos en la cabecera: <!–[if lte IE 6]> <link rel=”stylesheet” type=”text/css” media=”screen” href=”nombre-del-archivo.css” /> <![endif]–> De no hacerlo alteraras el desempeño de tu website en Internet Explorer 7. |
Finalmente ya puedes hacer uso de las imágenes png que creas conveniente para tu website.
Recuerda que todo lo comentado en este post figura en el archivo de ejemplo llamado png-ie6.zip.
Más información:
TwinHelix designs: http://www.twinhelix.com/css/iepngfix/
