Estou trabalhando no novo layout pro site da minha empresa e usando exclusivamente tableless e CSS positioning... Acontece que usei uma imagem em PNG com fundo transparente que, como todos sabem, o IE não renderiza corretamente, deixando um fundo cinza.
Já fucei a internet e achei algumas "soluções". Usei o filtro AlphaImageLoader, da Microsoft para fazer o PNG funcionar no IE.
<DIV ID="myDiv" STYLE="position:relative; height:259px; width:244px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bola.png',sizingMethod='scale');"></DIV>
Acontece que com esse plugin, a imagem não aparece no Firefox.
Gostaria de uma forma de fazer esse PNG funcionar bem em todos os navegadores... Nem que eu tenha que fazer uma CSS para cada navegador e um detecto de browser no site.
Qual a maneira mais simples?
PS: Achei também um comentário condicional que faz com que apenas o IE exiba o que tem dentro:
<!--[if IE]> <DIV ID="myDiv" STYLE="position:relative; height:259px; width:244px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bola.png',sizingMethod='scale');"></DIV> <![endif]-->
Mas aí se eu colocar algo fora para exibir no Firefox, o IE vai exibir os dois. Já vi também que não há um comentário condicional para outros navegadores (seria fácil, colocaria um comentário para cada navegador, assim eu colocaria o código certo para cada caso). Há alguma forma semelhante?
Oi gente,
Consegui resolver, vi a resposta noutro fórum um pouco confusa, mas consegui, vou passar aqui de forma melhor explicada pra quem mais precisar também.
Coloque este código no style (ou no arquivo CSS):
<style type="text/css">
/*
Alpha PNG support for IE
------------------------------
Aviso, este código abaixo funciona apenas para visualização na tela. Quando este documento for impresso, o bug voltará.
O Hack Abaixo faz o código rodar apenas no IE. Sendo que os outros browsers como, Firefox, Opera e Safari já tem a transparencia de PNG nativo.
\*/
* html img/**/ {
filter:expression(
this.alphaxLoaded ? "" :
(
this.src.substr(this.src.length-4)==".png"
?
(
(!this.complete)
? "" :
this.runtimeStyle.filter=
("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')")+
(this.onbeforeprint="this.runtimeStyle.filter='';this.src='"+this.src+"'").substr(0,0)+
String(this.alphaxLoaded=true).substr(0,0)+
(this.src="blank.png").substr(0,0)
)
:
this.runtimeStyle.filter=""
)
);
}
</style>Certifique-se de criar uma imagem "blank.png" transparente de 1x1 pixel e deixe na mesma pasta do arquivo CSS.
Na sua página, apenas insira o PNG normalmente. O Firefox vai abrir numa boa, o IE vai ler o hack para renderizar direitinho.
Comigo funcionou perfeito!
Abrassssss.
Edição feita por: Tarcísio Cavalcante, 03/08/2006, 11:10.
