Las ganas que teníamos todos de que llegase el soporte del formato de imagen PNG a Internet Explorer 7, y cuando llega, llega incompleto (viva Microsoft). El descubrimiento llega después de utilizar exhaustivamente mootools, haciendo aparecer de la nada capas con una imagen PNG, mientras se realiza el efecto se ve una sombra negra (depende del PNG) en la zona transparente de la imagen, hasta que se completa la animación con la opacidad máxima (100%).
Para no complicar el ejemplo y mostrar el problema de una forma más sencilla, vamos a usar un par de imágenes (gracias Arturito por tu colaboración) y el siguiente html:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES"> <head> <title>iuttu Test</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript" src="js/mootools.js"></script> <style> #test { background: url(IMGP1355.JPG) no-repeat; width: 300px; height: 225px; position: relative; } #test img { position: absolute; top: 60px; left: 50px; } </style> <script type="text/javascript"> function canviarOpacidad(_acual) { $("foto").setStyle('opacity', _acual); } </script> </head> <body> <div id="test"> <img id="foto" src="png.png" /> </div> </code> <code><a href="javascript:canviarOpacidad(0);">opacidad = 0</a> <a href="javascript:canviarOpacidad(1);">opacidad = 1</a> <a href="javascript:canviarOpacidad(.5);">opacidad = .5</a> </body> </html> |
Podeis ver el ejemplo aquí:
Bien, si pulsamos los dos primeros botones veremos que todo funciona de forma lógica (excepto en IE6, que no renderiza bien los PNGs de serie). Si pulsamos en opacidad cero la capa desaparece, y en opacidad uno la capa aparece, esto parece funcionar en IE7 que oculta y muestra la capa correctamente, pero, si pulsamos en opacidad .5, en IE7 parece que la capa se ve más oscura:
En fin, ahora esperar a que alguien descubra una forma de evitar esto (parece que funciona si la capa que contiene el png tiene como fondo un color plano) o a que salga el IE8 y se pongan las pilas 
1 comentario
en el IE8 RC1 sigue pasando lo mismo