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!


Não quer perder o próximo post? Cadastre seu e-mail e você receberá um aviso sempre que sair coisa nova :)

Comentários

  • Sidney

    Amigo, tô usando o ie6 aqui (só para testes, obviamente) e não está com transparência no logo.
    Talvez o problema seja aqui, mas seria bom vc testar.

    Abraço

    • Elia

      Oi Sidney! Você “sumiu” com a imagem em si e está exibindo só com CSS? Qualquer coisa manda um e-mail pelo contato aí no menu do lado (preguiça de colocar o link…).

  • http://panelaoweb.wordpress.com Robson

    Po muito boa explicação fico otima…

    mais a sua logo no IE6 fica com bg cinza…rsrsrs…

    • Elia

      Opa! Acessa com o IE 6 de verdade aí que vc vai ver que está certinha Robson! Se estiver usando o Multiple IE realmente fica com bg cinza, cuidado.

      Abs.

  • http://mudadeideia.com.br Israel Teixeira

    Só uma observação, o filter parece não resolver bem URLs relativas.