Este post foi migrado lá do Melancia na Cabeça. Ele tem muito tempo, resolve um problema que obviamente não existe mais, mas estou mantendo só por razões históricas 🙂
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!
