Solução definitiva – PNG Transparente no IE6
Postado em: 13 de janeiro de 2009 por Pedro RogérioMuitos 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
Isso pode lhe interessar:
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 é proprietário do blog CSS no Lanche, blog voltado ao desenvolvimento front-end.
Parrudinho disse: 13.01.09 ás 08:14
Po muito boa a dica vlw mesmo transparencia no IE6 e um saco…
mais i fim dele esta proximo vlw abraço
Flor Braz disse: 13.01.09 ás 08:31
gostei muitoooo desse artigo, realmente muito almejado o backgroung position e o background-repeat, vou testar já!
obrigada
Gustavo Ribeiro disse: 13.01.09 ás 08:38
Já tentei vários script para isso e só esse funcionou perfeitamente. Valeu Pedro.
Abs
Marcus VBP disse: 13.01.09 ás 08:41
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é?
Pedro Rogério disse: 13.01.09 ás 09:02
@Marcus VBP,
Ainda não testei dessa forma, mas com certeza vai consumir muito processamento, atrasando demais o carregamento da página. Abraços.
Denis Akao disse: 13.01.09 ás 09:03
Tem um que eu uso e funciona o repeat, position http://www.twinhelix.com/css/iepngfix/ na versão 2.0
Edson Hilios disse: 13.01.09 ás 09:21
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/
Julio César Bitencourt disse: 13.01.09 ás 09:34
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!
Igor Pimentel disse: 13.01.09 ás 12:18
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
Wagner Dantas disse: 13.01.09 ás 15:38
Ô 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!
Samuel Corradi disse: 13.01.09 ás 17:11
Mas 2009 não foi o ano que o IE6 morreu?
Daniel Nass disse: 19.01.09 ás 01:34
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é!
Pedro Rogério disse: 19.01.09 ás 10:19
@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.
Daniel Accorsi disse: 06.02.09 ás 07:29
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=”"
)
);
}
Daniel disse: 19.03.09 ás 13:41
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.
Julia disse: 20.03.09 ás 03:17
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.!
Anderson disse: 11.05.09 ás 13:14
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 !
André Banderas disse: 28.05.09 ás 15:04
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!
Thiago disse: 30.05.09 ás 15:56
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.