La transparencia PNG en Internet Explorer 6 no es posible, pero podemos aplicar algunos hacks para, por lo menos, simularla. Anteriormente publiqué una entrada exponiendo algunas soluciones para hacer posible la transparencia en Internet Explorer 6. Ahora, os enseñaré otros métodos. En muchas ocasiones necesitamos usar imágenes .PNG en nuestros diseños, y también que se muestren correctamente en IE6, así que no nos queda más remedio que tirar de varios métodos, todos, con sus ventajas y desventajas.

PNG Fixes

La mayoría de los PNG Fixes son realizados en javascript, aunque también hay fixes en CSS, ambos con el objetivo de solucionar la transparencia PNG en IE6. A continuación os muestro algunos de ellos:

  • Unit PNG Fix (JS)
  • DD_belatedPNG (JS)
  • Komodo Media’s PNG Fix (CSS)

Ventajas al usar PNG Fixes

  • Es cómodo y fácil instalarlo.
  • Te solucionan el problema en la mayoría de las veces

Desventajas al usar PNG Fixes

  • El soporte a Background-image es muy pobre (especialmente cuando se establecen posiciones y repeats).
  • Es una patada en el trasero si utilizas CSS Sprites
  • Algunas veces la proporción de las imágenes se estropean.
  • Con esto tienes otro archivo javascript en tu página, que la hace más pesada.
  • En soluciones por CSS el código no valida la validación W3C.

Existe un método para solucionar la transparencia PNG en IE6, forzando a IE6 a cargar un fichero .GIF en vez del .PNG. A continuación lo explicaremos.

Código HTML

<div id="myDiv1"></div>
<div id="myDiv2"></div>
<div id="myDiv3"></div>

Código CSS

.section {background:url(briefcase.png) repeat 0 0;}
     #myDiv1 {background-color:#333;}
     #myDiv2 {background-color:#666;}
     #myDiv3 {background-color:#999;}

Essto funciona en todos los navegadores excepto en IE6. Usaremos un hack para que funcione en IE6.

* html .section {background-image:url(briefcase.gif);}

Ventajas

  • Fácil y rápido.
  • No existen problemas con las propiedades del fondo (position + repeat).
  • Compatibles con CSS Sprites (solo necesitas guardar la imagen en otro formato).
  • No se pierden las proporciones de la imagen.
  • W3C Válido.
  • No añades otro archivo al encabezado de tu documento.

Desventajas

  • La calidad de la imagen transparente decrece.
  • Tienes otra imagen extra en IE6.
Ver ejemplo del funcionamiento de este método