PNG Transparente no IE6 com background position e repeat
September 22, 2009 by Marcio MisumiEm outubro de 2008 eu postei um tutorial explicando como corrigir o problema do PNG no Internet Explorer 6.0, porém a solução que eu mostrei não era possível utilizar background position e repeat. A algum tempo encontrei um JavaScript que corrigia este problema, mas antes de publicar um tutorial eu preferi testa-lo em alguns sites para ter certeza que funcionava legal.
Como aplicar a correção para o PNG Transparente no IE6
Primeiro você deve salvar o arquivo iepngfix.htc. Procure deixar este arquivo no mesmo diretório do arquivo CSS.
No arquivo iepngfix.htc existe uma variável “IEPNGFix.blankImg” que referencia uma imagem. O caminho (path) desta imagem é em relação ao arquivo HTML. Esta imagem pode ser salva como blank.gif, deve ser transparente e ter as dimensões de 1×1.
... IEPNGFix.blankImg = 'images/bground/blank.gif'; ...
Para utilizar PNG transparente utilizando a tag img diretamente no HTML é necessário utilizar o seguinte código CSS:
img {
behavior: url("css/iepngfix.htc");
}
Qualquer seletor/propriedade que tiver imagem PNG transparente deverá ser adicionado no código acima, separado por vírgula.
img, div.conteudo, h1, h2, input {
behavior: url("css/iepngfix.htc");
}
OBS: O caminho (path) para o arquivo iepngfix.htc é em relação ao arquivo HTML.
Agora para que o background position e repeat funcione, nós precisamos do arquivo iepngfix.js. Vamos fazer a chamada deste arquivo dentro da tag do html utilizando a condicional para que somente o IE6 faça a requisição deste arquivo, evitando assim que todos os navegadores façam o download deste arquivo desnecessariamente.
... <head> <!--[if lte IE 6]> <script type="text/javascript" src="js/iepngfix.js"></script> <![endif]--> </head> ...
Para links com o fundo transparente, no primeiro tutorial que postei, mostrava que era necessário definir no css os links com posição relativa. Isso não é mais necessário porque este JavaScript que nós utilizamos corrige este problema.
Problema encontrado
Depois de fazer diversos testes antes de criar esse tutorial, eu descobri um problema com esse JavaScript. Se por acaso você tiver uma funcionalidade em teu site que seja necessário colocar display: none; em algum elemento e depois ao clicar em algum botão este elemento passa para display: block; e justamente ele tiver um PNG transparente, essa imagem não receberá o filtro que deixa transparente no IE6.
Exemplos das soluções demonstradas neste tutorial
- PNG transparente com background repeat
- PNG transparente com background position
- PNG transparente utilizando a tag img no HTML
OBS: Não esqueçam de visualizarem os exemplos acima no IE6.
Esta solução foi desenvolvida por http://www.twinhelix.com
Deixem seus comentários.
Abraço.
September 22nd, 2009 at 10:29 pm
Valeu Márcio por mais esse tutorial… mandou muito bem!!!
E parabéns mais uma vez pelo seu blog!!!
Um abraço,