02.09.2009

PNG no IE 6 com CSS Hack

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 respostas a "PNG no IE 6 com CSS Hack"

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *