ie-6-vs-ie-7-png8-transparency

Internet Explorer 6 tiene un gran fallo, no le gustan los PNG, así que tratará la transparencia de ellos (su punto más fuerte), como si no la tuvieran. Ha habido muchos fix y hacks por los siglos de los siglos, pero aquí te traemos otro que da resultado.

Los pasos a seguir son muy simples:

  1. Metemos la imagen PNG entre un div con class png-holder (Obviamente “transparent.png” es tu imagen PNG que quieres que tenga transparencia en IE 6:
<div id="png-holder"></div>
  1. Así ya funcionaría en IE 7, 8, Firefox, Safari y Opera, pero para que funcione en IE 6 Hace falta un paso más. Definimos el código CSS:
#png-holder {
width: 300px;
height: 150px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}

Como se ve, se usa la propiedad filter de Microsoft. Con esto ya podremos ver nuestra imagen con transparencia en Internet Explorer 6.

Vía | Web Monkey