1. 程式人生 > >IE6下png透明處理心得

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代替。這樣效率也比較高