Uma outra solu莽茫o para poder visualizar PNG no IE 6 茅 usando um CSS Hack. Mas esse Hack s贸 funciona na propriedade background o que n茫o o torna a melhor solu莽茫o para o problema do PNG. Eu, particularmente, prefiro o uso do script ifixpng (que pega tanto em background como em imagens em PNG). Mas a vantagem desse CSS Hack 茅 que caso o javascript esteja desabilitado no navegador ele continua funcionando.

Para adicionar o CSS Hack, basta atribuir o c贸digo abaixo ao elemento que voc锚 desejar:

background-image:url(url da imagem);
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="url da imagem", sizingMethod="pode ser "crop" ou "scale"");

Por exemplo:

#background {
width:356px; height:256px;
background-image:url(images/classiccar.png);
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/classiccar.png", sizingMethod="scale");
}

No atributo sizingMethod=”" voc锚 pode por as op莽玫es crop (a imagem n茫o repete)聽ou scale (a imagem aumenta de acordo com o tamanho do box). N茫o 茅 poss铆vel utilizar a propriedade background-repeat, pois repeat n茫o funciona com esse Hack (no IE 6). Veja o DEMO no IE 6:
Demo

BUG que ocorre

Um BUG que pode ocorre no IE 6, 茅 o texto e os links dentro da tag聽que recebe esse Hack n茫o ficarem mais selecion谩veis. Uma solu莽茫o 茅 adicionar a propriedade position:relative na tag. Exemplo:

#background {
width:356px; height:256px;
position:relative;
background-image:url(images/classiccar.png);
_background-image: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/classiccar.png", sizingMethod="crop");
}

Obs: Caso continue bugado, tente aplicar a propriedade position:relative as tags filhas da tag que recebeu o Hack.

Observa莽玫es Finais

Como eu disse no in铆cio do post, n茫o recomendo a utiliza莽茫o desse Hack, s贸 em caso especiais. Se puder use o script ifixpng. O Hack tem o mesmo problema do script ifixpng, n茫o aceita background-position e nem background-repeat.

4 Coment谩rios em “PNG no IE 6 com CSS Hack”

  1. Ricardo Oliveira diz:

    muito maneiro teu blog cara, ta de parabens

  2. Carlos diz:

    Muito obrigado, stava com problemas no layout…

    O IE estava destorcendo meu logo, mas agora ta ok!

  3. Anderson diz:

    Valeu Pela dica, ele ficou transparente, mais os links n茫o d茫o certo, fica tudo imovel, e tem um monte de filhas que recebeu a tg.
    e agora???

  4. Ruan M茅r diz:

    @Anderson
    Tentou colocar “position:relative” nelas?