Imagens .png no IE6 com Transparência
Qualquer um que já teve alguma experiência na área de desenvolvimento web conhece o grande vilão dos desenvolvedores: o Internet Explorer 6. Por ser um navegador totalmente ultrapassado e que não segue os padrões web, o trabalho muitas vezes é dobrado para se ter um site ou aplicativo web cross-browser. O pior de tudo é saber que o IE6 ainda é amplamente utilizado, ou seja, não há como fugir dele.
Um dos “fails” que o IE6 tem é o fato de não conseguir renderizar imagens .png quando essas possui transparências. Elas acabam num “elegante” fundo cinza, arrebentando com o design do site. Felizmente, há solução para isso, através de javascripts.
Depois de experimentar vários scripts o melhor que encontrei foi o DD_belatedPNG, que resolve o problema de imagens .png tanto nas tags html de imagem, quanto no uso de imagens de fundo em classes CSS (inclusive com repetições).
Vejamos os dois casos como são simples:
Primeiro, fazemos a chamada do script entre as tags <head> e </head>:
<!--[if lt IE 7]>
<script type="text/javascript" src="DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('.pngFix, img');
</script>
<![endif]-->
Observe que há uma condicional que detecta o browser do usuário e faz a leitura do script (baixe-o aqui!) somente se ele estiver utilizando o Internet Explorer 6 ou inferior. Na linha 4, aplicamos o script para todas as tags de imagem <img> e a todos os elementos que tiverem a classe pngFix.
Desta forma você pode utilizar imagens .png a vontade, e caso precise utilizar como imagens de fundo de algum elemento, basta adicionar a este a classe pngFix, conforme mostrado abaixo:
HTML:
<div class="pngFix"> conteúdo... </div>
CSS:
div {
background: url("bg-div.png") top left repeat;
width: 55%;
padding: 20px;
border: 2px solid #006633;
margin: 0 0 20px 0;
}
Uma demonstração pode ser vista clicando no link abaixo (abra no IE6 e repare que o comportamento é o mesmo dos outros browsers):
Quaisquer dúvidas ou sugestões deixe seu comentário!
