PNG transparente en IE

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:

  1. 123
  2. <!--&#91;if lt IE 7.&#93;>
  3. <script defer type="text/javascript" src="pngfix.js"></script>
  4. <!&#91;endif&#93;-->

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.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.pngFix.js"></script>
  3. <script type="text/javascript">
  4.     $(document).ready(function(){
  5.         $(document).pngFix();
  6.     });

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


carlos lima
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!

Matias
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

Javier
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.

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

PNG Fix para IE6 » unijimpe
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 […]

Jiim
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!

unijimpe
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.

entrepixeles
Publicado: 16/02/2009 12:10 am

me va de pelos este tuto :)

Gio
Publicado: 15/04/2009 4:33 pm

ahhhH.. simple ! .:)

Jorge
Publicado: 25/05/2009 10:13 pm

Me funciona perfecto para explorer 6 no así para 5.5 que puedo hacer??

lite
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.

Tomas
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

Santi
Publicado: 13/11/2009 5:24 am

MUCHISIMAS GRACIAS!

patricia
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

Mariana
Publicado: 03/08/2011 8:05 pm

Jajaja! Gracias, gracias, gracias!
Bendito ie6 y la madre que lo parió xD

Programador web
Publicado: 09/08/2011 7:02 pm

Estoy viendo que esto no funciona con sprite.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)