Hack para que IE6 muestre bien las imágenes PNG

Un problema que se encuentra uno a veces es utilizar imagenes PNG (Protable Network Graphics) en tus diseños web, ya que no son totalmente soportados por navegadores más antíguos como Internet Explorer 6x. Las ventajas de utilizar PNG en lugar de GIF son varias. En este enlace se explica bastante bien y de manera resumida, este punto: http://www.w3.org/QA/Tips/png-gif

Por tanto, mirando al futuro y con la intención de hacer aplicaciones web de calidad, yo sólo uso PNG cuando quiero mostrar transperencias.

Existe un hack para hacer que Internet Explorer 6x, trate de manera adecuada este formato gráfico. Básicamente consiste en jugar con la característica de Internet Explorer de ser capaz de leer comentarios condicionales del tipo

<!--[If expression]> HTML <![endif]-->

Otros navegadores interpretarán esto como un comentario, por tanto con eso vamos a jugar. Este es el código que os propongo para tratar un PNG de manera diferente en función del navegador que lo visualiza:

Si el navegador es anterior a IE7, utilizamos un atributo de estilo sólo disponible para IE para mostrar la transparencia:

<!–[if lt IE 7]>

<DIV ID=”oDiv” STYLE=”position:relative; height:120px; width:316px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=’/imagenes/logo.png’, sizingMethod=’scale’);” >
</DIV>

<![endif]–>

Si es IE 7 o superior, mostramos la imagen normalmente, ya que éste tiene soporte para PNG:
<!–[if !lt IE 7]>

<img src=”imagenes/logo.png” alt=”Logo” height=”120″ width=”316″/>

<![endif]–>

El problema viene aquí. La forma de ocultar comentarios condicionales a IE que sea leído por otros navegadores es esta:
<!–[if !IE]>–>
<img src=”imagenes/logo.png” alt=”Logo” height=”120″ width=”316″/>

<!–<![endif]–>

Este último truco lo obtuve de Roger Johansson. Gracias Roger por el hack.