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é?
@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!