IE6下png透明处理心得

首先说明一下，网上处理IE6下png透明的方法有很多，但无外乎两种情况：一种是使用AlphaImageLoader滤镜，一种是使用微软的VML语言进行绘制。只不过前一种情况有多种触发方式，所以出现了

iepngfix.htc,css样式,onload时触发的多种解决方式。

 

 

一、iepngfix.htc的使用

http://www.twinhelix.com/css/iepngfix/

 

页面加入如下代码

 

<!--[if lt IE 7]>
 <style type="text/css">
img, div{ behavior: url(style/iepngfix.htc) } /**根据需要处理png的地方修改此处**/
 </style>
<![endif]-->

 

<script type="text/javascript" src="iepngfix_tilebg.js"></script> 

 

 

具体使用方式参看该官网

 

 

二、图片onload时触发

  

var isIE6 = (function(){
	var is6 = false;
	var Sys = {};
	var ua = navigator.userAgent.toLowerCase();
	(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] : 0;
	if (Sys.ie) {
		var temp = parseInt(Sys.ie);
		if(temp==6) is6=true;
	}
	return is6;
})();
function fixPng(img){
    if (isIE6 && (/\.png$/i).test(img.src)){
       var imgID = (img.id) ? "id='" + img.id + "' " : "" 
       var imgClass = (img.className) ? "class='" + img.className + "' " : "" 
       var imgStyle = "display:inline-block;" + img.style.cssText 
       if (img.align == "left") imgStyle = "float:left;" + imgStyle 
       if (img.align == "right") imgStyle = "float:right;" + imgStyle 
       if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle 
       var strNewHTML = "<span " + imgID + imgClass 
       + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";" 
       + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader" 
       + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
       img.outerHTML = strNewHTML;
    } 
}

注意：

此种方法修复png后，img标签被替换为span标签了

可以将该方法扩展下，适应不同的需求

 

=========================================================================

在IE6下，如果将“检查网页的较新版本”设置为“每次访问网页时”，此时使用滤镜方法修复png透明就会偶尔出现IE6卡死的问题（页面请求数据较多时）。

网速慢得情况下，尤为明显。所以使用上述方法是也只有在设置为“自动”或者“每次启动Internet Explorer时”，判断onload才有效，因为无论如何，给滤镜设置src时都会引起一次请求！

========================================================================= 

 

 三、微软的VML语言进行绘制

 

http://dillerdesign.com/experiment/DD_belatedPNG/#download

 

DEMO：http://www.ediyang.com/demo/DD_Png/ 

 

这种方法不会引起IE6卡死，但网速慢得时候会渲染很慢，一时半会儿看不到图片，请求超时会有小红叉。

官网提供的源码不支持图片的放大缩小，需要修改下：

将el.vml.image.fill.type = 'tile';改为el.vml.image.fill.type = 'frame';(在315行)

 

建议填充shape时，以图片的原始大小填充。这样才会显示完整。

el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';（在243行，第二三个参数传入图片的原始宽，高）

 

 

 综上：

1. 处理png问题时需要判断IE6，其它版本浏览器无需处理。

2. 个人建议：在IE6下尽量少使用半透明的png，在IE6下使用gif代替。这样效率也比较高