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.
muito maneiro teu blog cara, ta de parabens
Muito obrigado, stava com problemas no layout…
O IE estava destorcendo meu logo, mas agora ta ok!
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???
@Anderson
Tentou colocar “position:relative” nelas?