PNG Fix para IE6

Anteriormente 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 correctamente los PNGs transparentes. Esta vez les presentamos un nuevo método, se trata de la librería Unit PNG Fix.

Unit PNG Fix fue desarrollada por Unit Interactive y liberada bajo licencia Creative Commons. Entre las características mas interesantes de esta librería podemos destacar:

  • Javascript muy ligero, con menos de 1KB
  • Funciona para imágenes como objetos o background (fondo).
  • Funciona automáticamente sin llamar a ninguna funcion.
  • Permite el escalado automatico de los elementos.
  • Rápido de implementar, solo es necesario una línea de código.

Utilizando Unit PNG Fix
Lo primero es descargar la librería desde unitpngfix.zip, luego de extraer el archivo .zip encontramos el archivo unitpngfix.js que contiene la funcionalidad de esta librería. Luego incluimos esta librería en el header del html que deseamos de la siguiente forma:

  1. <script type="text/javascript" src="unitpngfix.js"></script>

Como pueden ver, sólo una línea de código y ya tenemos resuelto el problema de los PNGs transparentes para IE6, rápida y elegante la solución, no les parece?.

Comentarios Total 32 comentarios


Blaxter
Publicado: 17/07/2008 1:20 am

¿Y si el usuario tiene desactivado js? La forma tradicional de hacerlo es con un behaviour de ie, y la más correcta.

nic_net
Publicado: 17/07/2008 1:36 am

Hola, muy interesante. Ya conocía otro script similar pero este es más ligero :P

PD: Muy interesante el blog!

Saludos!

Michoacano
Publicado: 17/07/2008 8:07 am

Esto me ha salvado, y me ha quitado un peso de encima.

Barduck
Publicado: 18/07/2008 9:35 am

Está bueno este script, sobre tu opinión Blaxter, yo creo que hoy en dia el que no tiene habilitado js no le andaría ni la mitad de las páginas, menos con las 2.0 y el AJAX.

Probandolo vi que el script al parecer tiene un fallo, en IE6+ el padding en las imágenes no funciona correctamente.

jopicar
Publicado: 22/07/2008 4:30 pm

Gracias compi ;) yo he posteado la forma de guardar los png en Photoshop para evitar ese fallo y me ha funcionado, pero nunca está de más, total por 1Kb :)
Un saludo.

N3k0
Publicado: 08/08/2008 2:23 pm

Genial… con este me quita un peso de encima, soy “png lover”, mejor calidad que el gif y mas practico, pero aun hay mucha gente que usa IE :P. Buen blog.

Chaox

Kar
Publicado: 27/09/2008 9:20 pm

Muy bueno pero tengo una inquietud he probado muchosbug pa IE pero algunos me servian para imagenes normales ejemplo: pero para un background no me servia quedaba con fondo igual, al utilizar un —- Body {
background-image:url (”);
}

seguia igual

unijimpe
Publicado: 27/09/2008 10:42 pm

Efectivamente hay otras librerías que corregían el problema para imágenes incrustadas en el HTML pero no para las utilizadas como fondo, esta librería si corrige este inconveniente.

Rebeca
Publicado: 01/10/2008 12:08 pm

gracias muchas gracias esto es genial

julian
Publicado: 03/10/2008 12:55 am

esto es genial, y yo que tenia miedo de usar png’s

gracias!

Janckos
Publicado: 22/10/2008 8:58 am

gracias por el js.

Santiago
Publicado: 22/10/2008 12:22 pm

El script no funciona correctamente para FadeIn y FadeOut Effects de jQuery.
Para el otro problema si me funciono correctamente y consiste en PNG’s montados sobre otros PNG’s con sus respectivas transparencias.

Raúl
Publicado: 26/10/2008 4:51 pm

Tengo problemas entorno a ese problema también. He echo botones que cambian cuando pones el ratón sobre la imagen, la del fondo transparente, y la de encima no.

En este caso el explorer “muestra enlaces a imágenes rotos”…

alex
Publicado: 20/11/2008 11:56 pm

gracias por el aporte, me ha funcionado perfectamente. Saludos.

fueradejuego
Publicado: 12/12/2008 11:07 am

Muchas gracias por el aporte, aunque en ie6 cambia muchos estilos CSS de forma desastrosa.

para Raul:
Para evitar ese error en la imagen en ie6 create un gif de 1x1px que sea transparente y que se llame “clear.gif”.

En la primera línea del .js verás la ruta donde lo tienes que poner.

ako
Publicado: 21/01/2009 10:25 am

Muchas gracias por la info.
Pero tengo un problemilla. No puedo ajustar las imágenes, que utilizo de fondo, en el div. Es decir, que background-position no me funciona. ¿Alguien sabe como solucionar esto y poder posicionar las imágenes dentro del div? Zen!!

Enrique
Publicado: 13/02/2009 6:25 am

No serìa mejor incluir el script como dice el autor?

Asi nos aseguramos de que sólo cargue en IE <= 6, y no cargamos nada de “sobra” en otro navegador

andresP
Publicado: 24/02/2009 12:48 pm

Muchas gracias, sencillo y fácil de usar.. ya había probado algunos, pero este funciona muy bien.. GRACIAS

GustavoS
Publicado: 12/03/2009 8:53 am

A mi la verdad que no me funciona en mi IE6 :(, me sigue mostrando los png’s mal y para colmo depeniendo de las imágenes que tengo en mis desarrollos dejan de mostrarse dichas imágenes, incluí el archivo tal y como dice en el sitio de Unit Interactive pero nada, alguien puede postear un ejemplo que le funcione?… Gracias!!

jonathan
Publicado: 27/04/2009 4:16 pm

me sirvio gracias, hay clientes que usan solo IE (lo probe en IE 6 y funciona perfecto),tenia problemas con los .pgn muy bueno el aporte.. saludos desde Perú

edbox
Publicado: 31/05/2009 9:59 pm

Amigos,,, si es posble, ayudenme,,,,
utilice el archivo y pues si sirve,, pero no se por que me redimenciona algunas imagenes, las escala de forma desastrosa,,, cambia totalmente el diseño al original,,,, arriba dice que escala las imagenes automaticamente,,,,, y yo no quiero eso, lo que pasa es que yo lo utilizo como fondo el cual se debe repetir la imagen, y no las repite si no las agranda….

amigos que hago…. ayudenme…………… porfavor

Lucho
Publicado: 01/06/2009 9:26 pm

Qué tal Edbox, la verdad es que al utilizar el pngfix, lo que estás haciendo es quitar el ‘background-image’ – bueno, al menos como lo conoce css -.

Lo que utilizas es AlphaImageLoader para usar un filtro de IE (http://msdn.microsoft.com/en-us/library/ms532969(VS.85).aspx — acá puedes encontrar toda la descripción). Esta función no tiene ‘background-position’ o ‘background-repeat’. Para la posición, podrías usar otro div padre que ubique el que tengas con la imagen de fondo. Para la repetición, sólo puedes usar 3 opciones “crop” (para que encaje en el espacio), “image” (que mantenga las dimensiones de la imagen) o “scale” (que escala la imagen original).

El script lo que hace es revisar las opciones de ‘background-repeat’. En caso de ser ‘no-repeat’, utiliza la opción “crop”, en cualquier otro caso usa “scale”.

Disculpa el carretazo para decirte que no se puede… espero haya sido de alguna ayuda.

Saludos,

Luis

Julian
Publicado: 24/08/2009 11:58 am

Excelente! Gracias. Ya lo estoy usando en mi blog sobre PPT. Saludos.

Franklin
Publicado: 25/08/2009 12:21 pm

Hola a mi me pasa que la primera vez que carga la pagina se quedan imagenes sin mostrar, y en dependencia del lugar donde ponga el script me pasa que lo mismo que a edbox, como mejor me trabajo fue poniendo el script al final de la etiqueta html, ver web

Valentino
Publicado: 18/09/2009 8:14 am

Este script asi como esta, resuelve el tema de las transparencias pero desacomoda los elementos de la pagina. Ademas en un menu dhtml muestra una imagen rota superpuesta sobre la que si puede mostrar y me hace lo mismo sobre otra imagen png que no es mas que un cabezal.

Quisiera ver como usar de este script, solo lo que necesito y no afectara lo demas. Gracias

Edwin
Publicado: 06/10/2009 9:39 am

muy bueno sobre todo con los fondos, ya q pocas liberias soportan eso y ademas funcionan los link dentro del fondo..

jorge
Publicado: 21/10/2009 7:04 pm

DIOSSSSSSSSS GRACIASSSSSSSSSSSSSSSSSSSSSSSs

JavierStudio
Publicado: 25/03/2010 8:14 pm

hay un problema al usar la propiedad background-align no respeta la alineacion , es un enorme problema, si pretendes usar imagenes como fondo supongo que debe pasar lo mismo si usas algun body background

JavierStudio
Publicado: 25/03/2010 8:19 pm

una solucion genial es la de esta pagina http://www.twinhelix.com/css/iepngfix/demo/ respeta perfectamente los background-align, solucion definitiva, tambien la de backgroundrepeat, tienen que usarlos junto con el archivo js para que funcionen estas 2 propiedades

lesytech
Publicado: 30/08/2010 2:35 pm

amigo a mi no me da… hice los pasos tal como dice aca pero la imagen me sigue saliendo igual…

que puedo hacer? q otra opcion me dan?

Saludos desde venezuela

omar
Publicado: 31/05/2011 6:26 pm

Hola, espero que alguien me responda porque veo que el artículo es algo antiguo, me funciona perfecto! pero tengo un png como fondo en una ul que tiene <a&bt; y pasa que no me funcionan los a con este tuquillo, es muy raro, a alguien le paso?

 

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