PNG transparente en IE

16/04/2008
12:38 am
unijimpe

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.

tranparente

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.

Posts Relacionados

General, HTML, Javascript

Total de Comentarios: 10

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!

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

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.

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???

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 [...]

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!

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.