[教程] IE6下Png透明最佳解决方案 …

网络上解决IE6 Png透明解决方案有很多,
例如 IE PNG Fix from TwinHelix, Javascript IE PNG Fix, Transparent PNGs in Internet Explorer 6 from 24ways.等等.

然而现在,我要和你分享的是 Unit PNG Fix .


因为它的确是太出众了.

1.非常小的javascript文件:1kb!
2.解决因为IE的滤镜属性所带来的影响.
3.无论是img元素或background-image属性,都能有效果.
4.在加载页面之前就能自动运行.或者就一丁点的元素.
5.允许自动高宽.
6.使用起来超级简单.


如何使用:

1).下载zip然后,添加下面的代码到你页面的头部.(一定要确保路径的正确)

<!--[if lt IE 7]>
       <scripttype="text/javascript"src="unitpngfix.js"></script>
<![endif]-->





2).添加clear.gif到你的images 文件夹中.在js文件中,修改"varclear="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>');varct=document.getElementByIdx_x("ct");ct.onreadystatechange=function(){pngfix()};pngfix=function(){varels=document.getElementsByTagName_r('*'),ip=/\.png/i,al="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='",i=els.length,uels=newArray(),c=0;while(i-->0){if(els[i].className.match(/unitPng/)){uels[c]=els[i];c++;}}if(uels.length==0)pfx(els);elsepfx(uels);functionpfx(els){i=els.length;while(i-->0){varel=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)){varpath=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]>
       <script type="text/javascript"src="css/unitpngfix.js"></script>
<![endif]-->