Ver imágenes png en Internet Explorer 6

No lo puedo ocultar, detesto Internet Explorer. Siempre existen problemas entre la interpretación de código html por parte de los distintos navegadores, pero lo que es peor, también existen diferencias a la hora de usar un formato u otro. Esto ocurre con los archivos png. Internet Explorer 6 no los renderiza bien y las transparencias dejan de serlo para convertirse en «pegotes». Ciertamente no es culpa suya, ya que salió antes que la puesta de largo de los png’s pero eso no quita para que siga sin gustarme el explorer ;).

Para solucionar este problema existen varios métodos que paso a describir a continuación:

Unit Interactive nos ofrece un script que corrige los problemas de renderizado para  Explorer 6.

El código es realmente bueno a primera vista, ocupa menos de 1kb, funciona tanto para images img como background, y funciona automáticamente, no hay que ir llamándole.

Podéis verlo y descargarlo en http://labs.unitinteractive.com/unitpngfix.php

MEDIANTE CSS

Para aquellas imágenes definidas en la CSS, tendremos que usar la propiedad «filter«. Lo malo que esta solución tiene  es que hay que ir parcheando porque se trata de una orden que firefox no entiende, pero tenemos un truquito, y es que si colocamos en la línea CSS !important esa línea será leída por firefox y obviada por explorer (que no la reconoce).

#imagen {
width: 200px;
height: 120px;
background-image: url(”imagen_transparente.png”) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/imagen_transparente.png’);
}

Como podemos ver en el código CSS se diferencia entre las órdenes dadas a explorer y las dadas a firefox. Firefox, ejecutará aquellas órdenes señaladas con !important, explorer las obviará y pasará a la siguiente orden.

Como podemos ver, marcamos el ancho y alto de la imagen png para que todos los navegadores la pinten correctamente, luego, usamos un filtro para que explorer 6  pinte correctamente la imagen.

Pues eso es todo, a partir de ahora ya no hay disculpa para no usar los png’s !!!