Solução definitiva – PNG Transparente no IE6
Postado por: Pedro Rogério emMuitos 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
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Po muito boa a dica vlw mesmo transparencia no IE6 e um saco…
mais i fim dele esta proximo vlw abraço
gostei muitoooo desse artigo, realmente muito almejado o backgroung position e o background-repeat, vou testar já!
obrigada :)
Já tentei vários script para isso e só esse funcionou perfeitamente. Valeu Pedro.
Abs
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é?
usa um .* na class. Eu fiz , e funcionou tranquilo.
@Marcus VBP,
Ainda não testei dessa forma, mas com certeza vai consumir muito processamento, atrasando demais o carregamento da página. Abraços.
Tem um que eu uso e funciona o repeat, position http://www.twinhelix.com/css/iepngfix/ na versão 2.0
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/
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!
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
Ô 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!
Mas 2009 não foi o ano que o IE6 morreu?
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é!
@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.
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=”"
)
);
}
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.
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.!
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 !
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!
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.
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+
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….
[...] See the article here: Solução definitiva – PNG Transparente no IE6 " Pinceladas da Web … [...]
[...] Pincelada na Web – Solução definitiva [...]
Muito boa solução. Estou muito agradecido.
Valeu.
Olá,Pedro.
Realmente esse código funciona e é bem simples de implementar.
Parabéns e obrigado pela dica!
Coloquei assim no site
DD_belatedPNG.fix(‘.png_bg, .elemX, .elemY’);
Só funciona quando atualiza a página, alguém sabe dizer pq??
Este script resolve tambem em casos de usar png no ?
Pois testei vários scripts e nenhum resolveu….
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!
Muito bom, funcionou perfeitamente.
E que morra de vez o IE6.
Ajudou muito, vlw!
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?
Melhor solução que eu utilizei até o momento! Muito obrigado!
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
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.
Você pode utilizar das 2 formas.
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/
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
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’);
[...] é suportado pelo IE6 (mas existem inúmeras soluções para isso como esta aqui, por [...]
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?
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?
Valeu pela dica, funcionou certinho aqui!!
Abraços!
[...] Fonte do artigo [...]
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…
Muito obrigado. (:
Resolveu totalmente meus problemas.
Valeu brother!!! Tava num mato sem cachorro aqui!
Tks!
Muito bom…Parabéns
Perfect, resolveu meus problemas com IE aqui
vlw