Apesar de cada vez mais(e graças a Deus) o uso do IE6 está em queda, principalmente depois que o Orkut, YouTube e outros serviços “populares” avisarem que não irão mais dar suporte a esta coisa que a Micro$oft chama de Navegador de Internet, temos que fazer com que o layout funcione igual aos outros navegadores mais modernos, por uma questão muitas vezes de público-alvo, e umas das coisas que mais incomodam é o fato do IEca6 não suportar imagens PNG transparentes e acaba mostrando no lugar um “cinza-azul” que fica bem estranho pra não dizer ridiculo! Então neste post mostrarei 2 script para resolver esta situação, um para a tag img e outra para as imagens adicionadas nas CSS.
Antes de tudo adicione o seguinte comentário condicional, dentro das tag <head></head>, para que o script seja carregado quando o usuario estiver usando o IE6.
<!--[if IE 6]>
<script type="text/javascript" src="pngtransparentcss.js"></script>
<script type="text/javascript" src="pngtransparent.js"></script>
<![endif]-->
onde pngtransparentcss.js e pngtransparent.js são os arquivos que veremos a seguir:
Vamos então ao script para a tag IMG:
- baixe o arquivo – pngtransparent.js;
- coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
- Pronto é só isso! caso não funcione adicione class=”png_transparent”, dentro da tag img.
Vamos agora as imagens adicionadas nas CSS:
- baixe o arquivo – pngtransparentcss.js;
- coloque na pasta onde estão os arquivos HTML(caso você queira colocar em outra pasta, não esqueça de mudar o caminho no comentário condicional , ok?!);
- abra o arquivo pngtransparentcss.js, localize a linha da função DD_belatedPNG.fix e dentro das aspas simples coloque os seletores (class e id)onde estão as imagens transparentes nas CSS.
Por exemplo:
CSS: #topo {[...] background-image:url(“../images/bg-transparente.png” );[...]}
pngtransparentcss.js: DD_belatedPNG.fix(‘#topo’);
Nota: se quiser colocar mais de um seletor, separe com “,”(virgula).
créditos dos scripts:
- http://homepage.ntlworld.com/bobosola/ – pngtransparent.js.
- http://www.dillerdesign.com/experiment/DD_belatedPNG/ – pngtransparentcss.js.
É isso ai pessoal, qualquer dúvida é só comentar.
1 resposta Até agora ↓
lucas // 24/10/2009 às 13:21
bom, enquanto o IE fdp nao acaba, tem que ficar 30 minutos procurando um tutorial igual esse, que funcione…
nice :)