PNG en Internet Explorer | The PNG problem in Windows Internet Explorer

Firefox admite perfectamente las transparencias en los PNG, IE hasta el 7.0 no sabí­a nada de esto para variar y nos fastidiaba las grandes posibilidades que nos daba este formato. Es cierto que podrí­amos utilizar GIF en detrimento de la calidad, intenta hacer un GIF que se resuelva bien en cualquier fondo, los halos que se crean son un estorbo.

Como digo en IE 7.0 se ha solucionado este problema y si diseñas sin pensar en compatibilidades adelante, pero para no discriminar y hacer un sitio más usable tan sólo tendrás que añadir un par de lí­neas de código para que los navegadores IE 5.5 e IE 6.0 entiendan las transparencias de los PNG.

La solución es insertar en el head de tu(s) página(s) un link a este archivo «pngfix.js» javascript de esta forma para que sólo IE lo ejecute:

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

Algunas recomendaciones, ventajas y desventajas del autor:

Pros & Cons

Pros:

• Ignored as a comment in other browsers – it’s only run by Windows IE.
• Works with (X)HTML Strict & Transitional Doctypes
• Does not break W3C validation
• Lightweight and very easily deployed
• Works with existing in-line or external CSS rules based on class or ID selectors
• Works with old-style img align=»left» or align=»right» attributes
• Runs after any existing Body Onload code
• Works with imagemaps and input images using a special version

Cons:

• Doesn’t work in IE versions earlier than 5.5 – the AlphaImageLoader filter wasn’t introduced until version 5.5. There is no cure for earlier versions.
• Requires JavaScript to be enabled – the estimations for how many people choose not to use JS vary wildly. See note [1]
• CSS backround PNGs not supported – experimentation revealed I could traverse the Stylesheets collection and use the AlphaImageLoader trick to replace all background-image attributes containing PNGs, but then background-repeat would not work, and anchors placed over non-transparent parts of the image were not clickable :-(
• CSS rules for the PNG images based on the img selector are lost, but this is easily rectified by adding a class selector to your img rule such that img{..} becomes img,.png{..} – then add the attribute class=»png» to each of your PNGs.

PNG in Windows IE