Redxenon Desarrollo web, entre otras cosas

PNGs con transparencias en Internet Explorer

Sin duda alguna, Internet Explorer es el navegador que más problemas da a los desarrolladores web.

Resulta bastante escandaloso conocer cada día nuevos detalles sobre las incompatibilidades que este navegador tiene con javascript, o css. En cualquier caso, hoy vamos el por qué de un día de dolor de cabeza.

Cuando un día estamos tan contentos y nos ponemos a diseñar una web, y por algún casual decidimos introducir imágenes en formato PNG como background de un elemento, pero cuyo fondo es transparente, ya sea alpha o por índice, tenemos problemas en Internet Explorer. El porque de esto es uno de esos interrogantes para los cuales la razones de su existencia me resultan bastante indiferentes, pero está ahí y hay que solventarlo.

El asunto es que cuando se introduce una imágen PNG con transparencias y se carga la página con Internet Explorer, resulta que... tiene background! y es más feo que un pie por debajo.

Lo primero que te preguntas es... ¿fuiste tan capullo de ponerle un background horrendo, gris, malintencionado, debido a tus noches de borrachera?

Luego te das cuenta que no, que alguien te la estaba jugando.

Existen tres distintas soluciones.

1. Amagar, darse por vencido y meter la imagen en formato GIF con transparencia. Estas si las traga Internet Explorer.
2. Usar Javascript. Existe una libreria llamada pngfix que puedes descargar y aunque incrementes el tráfico de tu usuario, arreglas el problema. El añadido a esto es que la librería es válida, funciona, pero solo para Internet Explorer y será mejor que la cargues en un tag condicional de este modo:

   <!--[if lt IE 7.]>
   <mce:script defer type="text/javascript"  mce_src="pngfix.js"></mce:script>
   <![endif]-->
   

3. Finalmente la tercera y mejor opción es incluir un estilo en CSS que arregle el desaguisado. Esto se consigue con el siguiente código para una supuesta imagen "transparente.png"

   background:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
   src='transparente.png', sizingMethod='scale');
   

   Sin embargo, deberás quitar el background que tenías anteriormente. Por ello, aconsejo utilizar dos ficheros de estilos, uno para todo y otro para aquellos estilos que queden deteriorados por la culpa de Internet Explorer. En este caso, poner "background:none" en la descripción del estilo, resulta deprecated.