IE6下png透明處理心得
阿新 • • 發佈:2019-01-09
首先說明一下,網上處理IE6下png透明的方法有很多,但無外乎兩種情況:一種是使用AlphaImageLoader濾鏡,一種是使用微軟的VML語言進行繪製。只不過前一種情況有多種觸發方式,所以出現了
iepngfix.htc,css樣式,onload時觸發的多種解決方式。
一、iepngfix.htc的使用
http://www.twinhelix.com/css/iepngfix/
頁面加入如下程式碼
具體使用方式參看該官網 二、圖片onload時觸發<!--[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>
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代替。這樣效率也比較高