Como tenho algumas habilidades de produção de páginas da Web, ouvi há muito tempo que arquivos PNG translúcidos terão problemas de exibição no IE6, mas como nunca tive meu próprio site, nunca o encontrei.
Comecei a construir meu próprio site no início deste ano. Usei uma imagem png com parte transparente para fazer o LOGO do site. Achei que já era antigo e não havia necessidade de considerar o IE6. Um dia, quando voltei do trabalho e abri o back-end do Google Analytics, descobri que as visitas do IE6 representavam, na verdade, 40% do total de visitas. Fiquei chocado e baixei rapidamente a versão verde do IE6 da Internet para testar meu site. Como esperado, o LOGO estava completamente opaco.
Então procurei soluções online a noite toda. De modo geral, os métodos online são relativamente complicados, incluindo filtros CSS, js, substituição de gif, etc. Mas sempre achei que não era bonito o suficiente. Finalmente, depois de uma noite de pesquisa, encontrei um método que exigia apenas 2 frases de código js para resolver o problema sem problemas. Vamos compartilhar com você a seguir
Primeiro, baixe iepng.js do meu site
http: //www.***.com/templates/default/js/iepng.js
Se o ID do elemento do seu site que usa um png semitransparente como plano de fundo for um logotipo, adicione o seguinte entre <head></head>:
| <!-- para correção de png ie6 --> <script type="text/javascript" src="templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
Finalmente, deixe-me explicar, se você usar um png transparente como plano de fundo do div id foo, ele deverá ser escrito como:
| EvPNG.fix('#foo'); |
Se você usar um png transparente como plano de fundo de uma classe div de bar, ele deverá ser escrito como:
| EvPNG.fix('.bar"); |
A sintaxe é a mesma do CSS, OK, espero continuar trocando habilidades de construção de sites com você.
Este artigo foi originalmente criado por Wang Zai, webmaster do Tianniu.com (www.hers99.com). Indique a fonte ao reimprimir.
Obrigado Wangzi pela sua contribuição