因为本身会一些网页制作技术,所以很久前就听说过半透明的PNG文件在IE6下会有显示的问题,但由于一直没有自己的网站,也从来没有真正遇到过。
今年初开始做自己的网站。用了张带有透明部分的png图片做了网站LOGO,心想都什么年代了,不用考虑IE6了。某天下班回来打开Google Analytics后台,才发现IE6的访问量居然占去了总量的40%,吓了一跳,赶紧从网上下了绿色版的IE6测试自己的网站,果不其然,LOGO完全不透明。
于是连夜上网搜索解决方案,总体来说网上的办法普遍都比较复杂,包括css滤镜,js,gif替换等。但总觉得不够漂亮,终于经过一个晚上的查找,找到了一种只需要2句js代码便能顺利解决的方法。接下来和大家分享
首先,从我的网站下载iepng.js
http://www.***.com/templates/default/js/iepng.js
如果你的网站中使用半透明png作为背景的元素id为logo,则在<head></head>之间加入:
<!-- for ie6 png fix --> <script type="text/javascript" src=http://www.chinaz.com/Design/Rules/"templates/js/iepng.js"></script> <script type=text/javascript> EvPNG.fix('#logo');</script> |
好啦!就这么简单,完美解决,截图看看前后效果比较:
最后再解释一下,如果你用透明png作为背景的div id为foo,那么就应该写为:
EvPNG.fix('#foo'); |
如果你用透明png作为背景的div class为bar,那么就应该写为:
EvPNG.fix('.bar"); |
和CSS的语法是一样的,OK,希望能和大家继续交流建站技巧。
本文由甜妞网(www.hers99.com)站长旺仔原创,转载请注明出处
感谢 旺仔 的投稿