Pinceladas da Web

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

• PNG Transparente no IE6.
• PNG Transparente no IE6 com background-repeat.
• PNG Transparente no IE6 com background-position.