Uno de los problemas mas comunes al implementar páginas HTML es al momento de utilizar PNGs transparentes (En lugar de los GIF transparentes que muestran un borde mordido muy anti-estético) y es que en navegadores Internet Explorer 5.5 y 6 no se muestran correctamente, para ello le presentamos algunas soluciones.
PNGfix
Esta es una pequeña librería hecha en Javascript que permite corregir el problema de los PNGs transparentes en IE, esto se hace incluyendo un Javascript al inicio del HTML. PNGFix es una librería muy pequeña y muy potente, la puedes descargar en pngfix.js y para utilizarla solo tienes que incluirla en tu HTML de la forma:
123 <!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->
jQuery.pngFix
Para los usuarios de jQuery existe un plugin jQuery.pngFix que corrige los PNGs transparentes en IE, el cual es sencillo de implementar, funciona con PNGs utilizados como fondos con CSS, con PNGs transparentes que contienen enlaces. Para utilizar este método, primero debes incluir jQuery luego jQuery.pngFix y luego llamar al método pngFix al cargar la página.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.pngFix.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).pngFix();
});
</script>
Hay muchos otros métodos para resolver este problema, pero estos son las mas conocidos y mas documentados. Incluso pueden ver una forma solo utilizando CSS: Cross-browser semi-transparent backgrounds. Espero les sirva este pequeño tip que siempre les puede sacar de apuros.
Comentarios Total 16 comentarios
Publicado: 16/04/2008 10:18 am
Super útil!!! Crack!
Me va a servir mucho, sobre todo en el ie6 que desde hace tiempo tenía ese problema. Lo tuve que sustiruir por un flash transparente.
Sin contar que el logo ya no es indexable desde google.
Gracias!
Publicado: 16/04/2008 11:12 am
Al igual que el anterior comentario, utilizaba FLash a la hora de necesita runa buena transparencia, con este Tip me has dado una ayuda muy grande.
SAludos
Publicado: 16/04/2008 12:36 pm
La verdad muy útil, yo también usaba Flash,
el único detalle -no sé si a ustedes les ha pasado- pero como que cuando tienes muchas imágenes PNG demora más en cargar la página, estando en local.
Publicado: 18/04/2008 2:30 pm
solo tengo una duda, esto sirve igual si queremos agregar más de un PNG, dentro de la página???
Publicado: 16/07/2008 11:54 pm
[…] comentábamos en PNG transparente en IE sobre las diversas técnicas para corregir un bug de IE6 (Internet Explorer 6) el cual no muestra […]
Publicado: 27/11/2008 7:45 pm
Porfa dime si tienes la solucion para paginas web hechas en php… lo necesito y no doy con la respuesta, gracias!
Publicado: 29/11/2008 9:58 pm
Una web hecha en php al final genera un HTML para que el usuario lo pueda visualizar, entonces la solución es la misma para paginas hechas en PHP, ASP, JSP, etc.
Publicado: 16/02/2009 12:10 am
me va de pelos este tuto :)
Publicado: 15/04/2009 4:33 pm
ahhhH.. simple ! .:)
Publicado: 25/05/2009 10:13 pm
Me funciona perfecto para explorer 6 no así para 5.5 que puedo hacer??
Publicado: 01/08/2009 2:47 pm
enhorabuena. La verdad es que estoy utilizando jquery y es una pasada, sobretodo la cantidad de plugins que tiene detras.
Publicado: 05/11/2009 1:21 pm
Puede ser que no me funcione, lo probe y se me siguen viendo mal los png.
¿Qué puede ser? Gracias igual desde ya.
Tomás
Publicado: 13/11/2009 5:24 am
MUCHISIMAS GRACIAS!
Publicado: 15/07/2011 3:02 pm
cuando habro internet explore y ares las paginas de ambos son trasnparentes se ve lo que esta debajo y es incomodo para trabajar como se corrije esto.
gracias
Publicado: 03/08/2011 8:05 pm
Jajaja! Gracias, gracias, gracias!
Bendito ie6 y la madre que lo parió xD
Publicado: 09/08/2011 7:02 pm
Estoy viendo que esto no funciona con sprite.