Solução definitiva – PNG Transparente no IE6

Em: CSS|Design|Internet|JavaScript

30 jan 2009

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 )

Fonte do artigo

Considerações: Funciona perfeitamente. No meu caso, para funcionar em todos os .pngs que estão aplicados no site, eu simplismente utilizaei da seguinte forma:

DD_belatedPNG.fix(‘.*’);

Deixe seu comentário

  • Tweets that mention É big.. É big.. - Blog Área Local -- Topsy.com: [...] This post was mentioned on Twitter by Área Local, Cristhian-Xthor. Cristhian-Xthor said: Para [...]
  • Máira: Muito obrigada! Sucesso para nós... que nascemos no mesmo dia né?! Daqui pra cima, sempre! [...]
  • Carlos Antonio: Fala galera! Parabéns pelos 6 anos de vida da Área Local e pelo sucesso da empresa! Grande abra [...]
  • Karina: Parabéns equipe Área Local. Sucesso! Tenho muito orgulho de vocês... [...]
  • Remo: É isso aí pessoal! Parabéns para a galera toda, vamos em frente e que venham mais e mais desafios [...]