网络上解决IE6 Png透明解决方案有很多,
例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24 ways.等等.
然而现在,我要和你分享的是 Unit PNG Fix .
因为它的确是太出众了.
1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.
如何使用:
1).下载zip 然后,添加下面的代码到你页面的头部.(一定要确保路径的正确)
<!--[if lt IE 7]>
<![endif]-->
2).添加clear.gif到你的images 文件夹中.在js文件中,修改"var clear="images/clear.gif" 路径,为你存放clear.gif的文件路径.
3). 你的整个项目的png图片都实现了透明效果.的确非常简单吧?就2个步骤,就实现了整个站点所有png的透明效果.
一些注意事项:
Unit PNG Fix能够让 background-repeat在ie6下工作,
不过这种工作方式不是像正常的repeat图片重复的效果,而是采用了拉伸的效果.
但是,仍然是有效果的,所以这也是非常不错的.因为没有任何一个解决方案能够实现ie6下透明滤镜重复图片这个功能.
//============================================================================
下面是unitpngfix.js内容
var clear="images/clear.gif"; //path to clear.gif
document.write('<script type="text/javascript" id="ct" defer="defer" src="javascript:void(0)"><\/script>');var ct=document.getElementByIdx_x("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){var els=document.getElementsByTagName_r('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=new Array(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);else pfx(uels);function pfx(els){i=els.length;while(i-->0){var el=els[i],es=el.style,elc=el.currentStyle,elb=elc.backgroundImage;if(el.src&&el.src.match(ip)&&!es.filter){es.height=el.height;es.width=el.width;es.filter=al+el.src+"',sizingMethod='crop')";el.src=clear;}else{if(elb.match(ip)){var path=elb.split('"'),rep=(elc.backgroundRepeat=='no-repeat')?'crop':'scale',elkids=el.getElementsByTagName_r('*'),j=elkids.length;es.filter=al+path[1]+"',sizingMethod='"+rep+"')";es.height=el.clientHeight+'px';es.backgroundImage='none';if(j!=0){if(elc.position!="absolute")es.position='static';while(j-->0)if(!elkids[j].style.position)elkids[j].style.position="relative";}}}}};};
//1.注意要把透明的1*1的clear.gif放到images文件夹下。
//2.html中加入下面代码,注意路径。
<!--[if lt IE 7]>
<![endif]-->