em
Solução definitiva – PNG Transparente no IE6

Solução definitiva – PNG Transparente no IE6

Muitos desenvolvedores não sabem, mas o IE6 e versões anteriores possuem um terrível problema com PNG’s de 24 Bits, onde ele não processa o canal Alpha da imagem, com isso toda a transparência fica com o fundo meio “esverdeado” (problema esse já corrigido no IE7). Hoje em dia existem vários scripts que corrigem esse problema de transparência no IE, mas todos sofrem da mesma deficiência, que é a não implementação de background-position, background-repeat, link que não funciona entre outras coisas.

Já testei várias formas diferentes de correção, mas finalmente encontrei um script JS que funciona perfeitamente, onde é implementado o tão sonhado background-position e background-repeat, lhes apresento o DD_belatedPNG, um JavaScript extremamente pequeno, que em sua versão comprimida chega a aproximadamente 6KB. Sua utilização é extremamente simples, basta você baixar o arquivo JS e fazer uma chamada para o mesmo da seguinte forma dentro do header do seu site:


<!--[if IE 6]>
<script src="DD_belatedPNG.js" type="text/javascript"></script>
<script>
  /* Exemplo de utilizacao */
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

O Script foi inserido na página via comentários condicionais, para que seja lido somente pelo Internet Explorer 6 e menores, os outros browsers o consideram como um simples comentário HTML. Da forma citada, todos os elementos que possuírem a classe “png_bg” serão afetadas pelo Script as imagens começarão a funcionar corretamente. Uma outra forma de utilização é chamando os elementos DOM:

DD_belatedPNG.fixPng( seu elemento )

Exemplos

Comentários

  1. Po muito boa a dica vlw mesmo transparencia no IE6 e um saco…
    mais i fim dele esta proximo vlw abraço

    por Parrudinho — Responder
  2. gostei muitoooo desse artigo, realmente muito almejado o backgroung position e o background-repeat, vou testar já!

    obrigada :)

    por Flor Braz — Responder
  3. Já tentei vários script para isso e só esse funcionou perfeitamente. Valeu Pedro.

    Abs

    por Gustavo Ribeiro Responder
  4. Puxa, muito bom!!

    pergunta: se eu quiser aplicar automaticamente à página, posso fazer: DD_belatedPNG.fixPng( ‘body’ ) ?

    Agora fazer isso deve aumentar o tempo de processamento da página né?

    por Marcus VBP Responder
    1. usa um .* na class. Eu fiz , e funcionou tranquilo.

      por Caio Seixas Responder
  5. @Marcus VBP,

    Ainda não testei dessa forma, mas com certeza vai consumir muito processamento, atrasando demais o carregamento da página. Abraços.

    por Pedro Rogério Responder
  6. Tem um que eu uso e funciona o repeat, position http://www.twinhelix.com/css/iepngfix/ na versão 2.0

    por Denis Akao Responder
  7. Sinceramente não ligo a mínima, minha máquina já nem tem o IE 7 qnt menos o 6 e já decidi que não vou mais nem testar nele e todos os meus sites terão o script do http://www.stopie6.org/

    por Edson Hilios Responder
    1. Se você fechar um projeto para produzir um sistema web para uma empresa grande eles não vão querer saber disso, você terá que fazer funcionar no IE6 pra eles. A maioria das redes em grandes empresas ainda usa Windows XP e os usuários só tem o IE6 à disposição, sem opção de escolha para instalar um navegador atualizado.

      por Everton Pabon — Responder
  8. Fala Pedro! Bela dica…

    Eu uso um plugin jQuery que está me agradando muito! Ainda não tive problemas com ele!
    O plugin está disponível em: http://jquery.andreaseberhard.de/pngFix/

    Abraço!

    por Julio César Bitencourt Responder
  9. já usei vários hacks tbm.. mas sem dúvidas esse script foi o melhor.. tenho utilizado ele nos meus últimos projetos. O ultimo foi http://www.cbhbanabuiu.com.br

    Abraços

    por Igor Pimentel Responder
  10. Ô inferno, qto mais esses caras alimentam esse diabinho, mais ele vai viver!
    Não têm que criar nada pra esse ie6!
    Esperem ele morrer e pronto!

    por Wagner Dantas Responder
  11. Mas 2009 não foi o ano que o IE6 morreu?

    por Samuel Corradi Responder
  12. Vi a alguns dias esse esquema em um blog ingles, achei muito bom mas tem um erro neste codigo.

    Olhando a ultima linha do codigo temos Ele contem um espaço entre < e ! e isso faz o IE pirar não sei porque raios.
    Pra funcionar é so tirar o espaço ^^

    Até!

    por Daniel Nass Responder
  13. @Daniel,

    Isso é por causa do WordPress, já removi o espaço mas ele insiste em colocá-lo de volta. Vou tentar inserir o código de uma forma diferente. Abraços.

    por Pedro Rogério Responder
  14. E esse código?? Só colocar no seu CSS e não precisa fazer mais nada.

    Abraços!!

    /* CSS Document */
    /* Alpha PNG support for IE
    ——————————
    \*/
    * html img/**/ {

    filter:expression(
    this.alphaxLoaded ? “” :
    (
    this.src.substr(this.src.length-4)==”.png”
    ?
    (
    (!this.complete)
    ? “” :
    this.runtimeStyle.filter=
    (“progid:DXImageTransform.Microsoft.AlphaImageLoader(src='”+this.src+”‘)”)+
    (this.onbeforeprint=”this.runtimeStyle.filter=”;this.src='”+this.src+”‘”).substr(0,0)+
    String(this.alphaxLoaded=true).substr(0,0)+
    (this.src=”img/blank.png”).substr(0,0)
    )
    :
    this.runtimeStyle.filter=””
    )
    );
    }

    por Daniel Accorsi Responder
  15. Bom, já foi delarada a morte oficial do IE6 este ano pelo que eu percebi, mas continuamos tentando suportalo e passamos 80% do tempo tentando arrumar os problemas no IE6.

    Vlw pelo script.

    por Daniel — Responder
  16. Fala grande!
    Então, estou sempre, digo, todos os dias, por aqui lendo seus post sempre muito úteis. Além disso sempre que tenho uma dúvida aqui é um dos primeiros lugares que consulto e em 99% das vezes, resolvo meu problema! Você faz um trabalho muito bom… Agora eis a dúvida!
    Preciso colocar um png no hover do link…
    Ou seja, quando está no a, coloquei a um png “A” com a classe png_bg e beleza, tudo lindo…
    mas qndo coloco a imagem “B” no a:hover com a classe tb, ele ignora.. não está renderizando legal.. no IE, ele continua c o fundo…
    Se puder dá uma ajudar, fico no aguard.
    Abraço a todos,
    donnapanda.!

    por Julia — Responder
  17. O problema é que imagens que tem classes não funciona !

    Testei, algumas imagens funcionaram, mas outras que tinham classe e estavam na mesma página, não funcionou, só quando removi as classes !

    por Anderson — Responder
  18. Amigos já percebi uma coisa horrorosa! Apesar do ie6 ter sua cabeça cortada em 2009, parece que meus clientes (principalmente clientes da industria) ainda não perceberam isto. Mais uma lei de Murphy: Não importa que 90% dos usuários não trabalhem mais com ie, pois 100% de seus clientes vão visualizar o site que vc fez no ie6!

    por André Banderas Responder
  19. Meu jovem parece que esse script JS não funciona com iframes.Quando abro alguma pagina no iframe principal, as classes que contem os PNG’s somem completamente.

    Quando abro a página normalmente sem o iframe o problema não acontece.
    Gostaria de saber se há uma solução para esse problema.

    Ótimo Script, o melhor que já encontrei.

    Grato.

    por Thiago — Responder
  20. Apesar da maioria dos grande sites estarem ajudando a retirar o IEca do mercado, ainda tem cliente que seus usuários ainda são utilizadores de IEca. Essa solução é mesmo a melhor e mais fácil de ser aplicada.
    Valeu d+

    por Helder Robalo Responder
  21. Cara, o seu código é bom… mas no meu não deu certo! [:(] Não sei como aplicar no meu CSS, Tenho 3 .class e não sei definir esse Script nelas….

    por Feliep — Responder
  22. Pingback: Solução definitiva – PNG Transparente no IE6 " Pinceladas da Web …

  23. Pingback: Guia para estudar CSS | import Zeh.Design

  24. Muito boa solução. Estou muito agradecido.
    Valeu.

    por Milson Marins Responder
  25. Olá,Pedro.

    Realmente esse código funciona e é bem simples de implementar.

    Parabéns e obrigado pela dica!

    por Ricardo Responder
  26. Coloquei assim no site
    DD_belatedPNG.fix(‘.png_bg, .elemX, .elemY’);
    Só funciona quando atualiza a página, alguém sabe dizer pq??

    por Diego — Responder
  27. Este script resolve tambem em casos de usar png no ?
    Pois testei vários scripts e nenhum resolveu….

    por Cleyton — Responder
  28. Parabéns!
    Hoje em dia é muito difícil achar uma solução que resolva no meio de tantas “baboseiras” que colocam na internet sem ao menos testarem o que escrevem.

    Vlw!

    por Andre — Responder
  29. Muito bom, funcionou perfeitamente.
    E que morra de vez o IE6.

    por Julio Cesar Fagundes Responder
  30. Ajudou muito, vlw!

    por REDMANBR — Responder
  31. Em algumas partes aonde o PNG estava como bg funcionou tranquilo, por exemplo o a tag “a”, só que bg em li não funciona. Alguém viu esse problema?

    por Tiago Celestino Responder
  32. Melhor solução que eu utilizei até o momento! Muito obrigado!

    por Leandro Borges Responder
  33. Fera boa solução o DD_belatedPNG.js ajuda bastante – utilizo ele quando preciso manter a transparência em imagens grandes, para imagens menores(ícones)utilizo essa forma: http://www.webjasper.net/criacao-e-design/photoshop/png-transparente-no-internet-explorer-6-26.html

    Detalhe essa é uma solução livre de scripts, mais uma vez para imagens grandes utilizem DD_belatedPNG.js

    por Jardiel Valadão Responder
  34. Boa tarde Pedro, ótimo post…

    Se eu deixá-lo assim:

    DD_belatedPNG.fix(‘img’);

    todos os lugares que tiver a tag img vai executar o script .js?

    ou eu tenho mesmo que colocar na classe da imagem, como exemplo:

    Se for somente na classe, eu não terei a possibilidade de estilizar a imagem com CSS.

    Obrigado e aguardo resposta.

    por Rafael Vinicius — Responder
    1. Você pode utilizar das 2 formas.

      por Pedro Rogério Responder
  35. Pedro, obrigado pela resposta.

    Estou usando o IETester para testar no IE6. As imagens inseridas como funciona normalmente a transparencia, mas como background não tem transparencia, fica tudo cinza.

    DD_belatedPNG.fix(‘.png_bg, img’);

    Coloquei igual ao do site: http://www.dillerdesign.com/experiment/DD_belatedPNG/

    por Rafael Vinicius — Responder
  36. Pooooo…um milagre mermão. png_bg boomm e o Javascript faz o que a Microsoft não fez. uahuahua. Valeu galera. Excelente. Parabéns

    por Eduardo Medina Responder
  37. Boa noite! As imagens ficaram transparentes, porém no ie6 fica aparecendo o seguinte erro: ‘DD_belatedPNG’ is undefined. Alguém sabe porque isso ocorre? Usei o código da seguinte forma:

    DD_belatedPNG.fix(‘img’);

    por Ana Paula — Responder
  38. Pingback: Meteora » Blog Archive » Uso do GIF, JPG e PNG no webdesign

  39. Pedro, até então eu apontava o script DD_belatedPNG como a melhor solução para esse bug do IE6. Mas num projeto atual estou enfrentando um problema inédito. O script está travando o IE6 (e não só o IETester, mas tb o IE6 original rodando em Windows XP na máquina virtual q criei aqui). Já tentei isolá-lo e nada.

    Rodando o Google para buscar alguma solução mais atual invariavelmente caio em uma das várias discussões em posts do seu blog (ponto pra vc!). E lendo a resposta do Julio César Bitencourt mais acima lembrei q ainda não tinha tentado (nesse projeto em questão) o PNGFix em jQuery (já q estou rodando outras bibliotecas).

    Deu certo, porém os PNG em backgrounds e os sprites tão dando aquele problema de “Blur” nas imgs…

    Vc sugere mais alguma outra solução?

    por Edson Responder
    1. Olá Edson! Já aconteceu de travar comigo quando chamei, duas vezes, a biblioteca jQuery. Uma na MasterPage e outra na propria pagina .aspx. Será que seu caso é parecido?

      por Pedro Felipe — Responder
  40. Valeu pela dica, funcionou certinho aqui!!

    Abraços!

    por Victor Responder
  41. Pingback: Solução definitiva – PNG Transparente no IE6 - Blog Área Local

  42. Como toda gambiarra para IE6, tapa um buraco, abre outro, usando esse script, todos os demais param de funcionar.

    Não suporto mais IE6, virou um problema muito sério, colega disse 80% do tempo tentando corrigir os problemas dele, acho que é bem mais…

    por Renato Responder
  43. Muito obrigado. (:

    Resolveu totalmente meus problemas.

    por Caio Seixas Responder
  44. Valeu brother!!! Tava num mato sem cachorro aqui!

    por Carlúcio Responder
  45. Tks!

    por Evelyn Jacovani Responder
  46. Muito bom…Parabéns

    por Gunnar Responder
  47. Perfect, resolveu meus problemas com IE aqui
    vlw

    por Brayan — Responder
  48. Funcionou perfeitamente!!!

    por Dipositive — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>