PNG no IE 6 - Entenda como o problema é resolvido

ATENÇÃO: Para verificar a renderização do png no IE 6 use o próprio Internet Explorer 6 e não o Multiple IE (que por sinal não recomendo pra mais ninguém). Se não tiver acesso a um computador com esse browser é possível testar através do uso de uma máquina virtual.

O formato de arquivos PNG surgiu para substituir o limitado formato GIF, diferindo deste no suporte a canal alfa, no maior número de cores e na alta compressão possível. Por outro lado o Internet Explorer 6, navegador xing-ling ainda muito usado, não dá suporte nativo à transparência do PNG, mas é possível contornar esse problema com uma propriedade CSS.

Não vou publicar nenhuma solução aqui, mas explicar como todas elas funcionam (sim, elas funcionam da mesma forma). Para que a imagem fique transparente você deve sumir com a imagem em si e exibi-la somente com a propriedade filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<caminho_da_imagem>', sizingMethod='image');.

Você pode fazer isso com javascript, com comentários condicionais, com a propriedade CSS behavior ou com uma combinação de todas elas. Aqui no Melancia a logo do cabeçalho é um png e para que ela ficasse do jeito que está usei uma combinação de comentários condicionais e CSS. A imagem está dentro de um span que só existe nos IE < 7, por causa dos comentários condicionais - veja o código-fonte para entender melhor - e nesses navegadores (argh!) a imagem de dentro não é renderizada (display:none) e o span assume sua função.

Para uma solução mais genérica o uso do javascript é mais recomendado, até porque não afeta tanto a acessibilidade. E quer saber do que mais: está mais do que na hora do IE6 começar a sumir.

Para uma solução copy/paste esse site parece muito bom. A do behavior desse site é bem legal também.

Agradeço ao meu grande amigo/irmão Israel Teixeira pela sugestão de tema!