IE6不支持PNG圖片透明效果的完美解決方案（完善版)

IE6不支持PNG圖片透明效果的完美解決方案（完善版)

可憐的IE6，不支持PNG圖片透明，
這已是其衆多「BUG」中，不是那麼顯眼的一個，
但也是讓部分人頭痛的一個了。
（今天在機房那破機器上IE6忘了抓圖了，如今想給你們看效果也難啊。）
發個PNG你們看看。   若是用IE6的朋友，請在下面回覆截個圖！謝謝啦。
[attach]641886[/attach]
想查看區別的，請到這個頁面
http://www.54caizi.org/demo/enablePngImages.html

因此，只有藉助濾鏡來實現透明瞭。

方法一： 複製內容到剪貼板
代碼:
<div align="center" style="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png圖片路徑 ',sizingMethod='p_w_picpath'); " width="100px" height="100px"></div>這樣的話，須要在每一PNG都這麼作，顯然不合適。並且設計的時候也不直觀。

方法二：
將下面的代碼保存爲「png.js」 複製內容到剪貼板
代碼:
function correctPNG()
{
for(var i=0; i<document.p_w_picpaths.length; i++)
{
var img = document.p_w_picpaths[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
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 + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent(" correctPNG);而後在網頁底部加上 複製內容到剪貼板
代碼:
<script type="text/javascript" src="png.js"></script>通過實際測試。
這種方法在普通模式下，問題不大。

可是問題來了：
一、若是圖片未指明大小（width/height），那麼，最終顯示的尺寸將是（0px*0px），也就是說：啥也沒有。
二、若是把圖片放在隱藏層中（<div style="display:none;">...），那麼，同上。程序得到不到圖片大小。

這麼一來，也不能完美解決了。

OK!那麼咱們來完善一下吧！

既然獲取不到代碼中的圖片尺寸，咱們何不直接讀取圖片的實際尺寸呢？ 複製內容到剪貼板
代碼:
<!--對於隱藏層中的圖片，或者其餘緣由致使圖片尺寸沒法得到-->
<!--此時咱們須要讀取圖片的真實大小-->
<!--以避免寬高都爲0px而致使圖片不顯示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}咱們經過 Image對象，來得到其真實大小。而後最終代碼以下： 複製內容到剪貼板
代碼:
function correctPNG4IE6()
{
//得到所有圖片
var imgs=document.getElementsByTagName("IMG");
for(var i=0; i<imgs.length; i++)
{
var img = imgs[i];
var imgName = img.src.toUpperCase();
<!--操做PNG圖片-->
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : "";
var imgClass = (img.className) ? "class='" + img.className + "' " : "";
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' ";
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;

<!--對於隱藏層中的圖片，或者其餘緣由致使圖片尺寸沒法得到-->
<!--此時咱們須要讀取圖片的真實大小-->
<!--以避免寬高都爲0px而致使圖片不顯示-->
var imgTrueWidth=0;
var imgTrueHeight=0;
if(img.width==0)
{
var imgPng=new Image();
imgPng.img.src;
imgTrueWidth=imgPng.width;
imgTrueHeight=imgPng.height;
}

<!--用<span>替換<img>標籤-->
var strNewHTML = "<span " + imgID + imgClass + imgTitle + " style=\"";
strNewHTML=strNewHTML+"width:" + (img.width==0?imgTrueWidth:img.width) + "px; height:";
strNewHTML=strNewHTML+(img.height==0?imgTrueHeight:img.height) + "px;";
strNewHTML=strNewHTML+imgStyle + ";" + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
strNewHTML=strNewHTML+"(src='" + img.src + "', sizingMethod='scale');\"></span>";

<!--執行替換-->
img.outerHTML = strNewHTML;

i = i-1; } } } <!--加載完畢，執行代碼--> window.attachEvent(" correctPNG4IE6);