ie6的png24問題

解決IE6的PNG透明JS插件 DD_belatedPNG

引：http://www.cnblogs.com/cobby/archive/2012/05/11/2495801.html

IE6的PNG透明是個老問題了，最近有朋友問我有沒有最好的解決這個問題的插件。雖然知道且在用DD_belatedPNG這個插件，今天抽空把這個發上來。
雖然以前在博客裏發過一款jquery的png插件，可是不支持背景平鋪。
DD_belatedPNG使用了微軟的VML語言對PNG圖片進行從新繪製，以達到半透明的效果，而且能支持background-position和background-repeat屬性，支持僞類。是一款不錯的值得推薦的插件，用法也比較簡單。

 

使用方法：

 

1 2 3 4 5 6

<!--[if IE 6]> <script src="DD_belatedPNG.js"></script> <script> DD_belatedPNG.fix('.png_bg'); </script> <![endif]-->

 

 

 

 

 

 

引用函數是DD_belatedPNG.fix()，括號裏的 .png_bg 改爲你的css選擇器名稱。

ID選擇器例子：

 

1	DD_belatedPNG.fix('#png');

 

 

僞類例子：

 

1	DD_belatedPNG.fix('.png a:hover,.png a:focus');

 

 

img標籤例子：

 

1	DD_belatedPNG.fix('img');

 

 

若是是多個直接加逗號（英文下的）就行。例如：

 

1	DD_belatedPNG.fix('.png_bg,#png,.png a:hover,.png a:focus,img');

 

 

JS文件下載地址：
0.0.8a.js (未壓縮版本)
0.0.8a-min.js (壓縮版)

官方網站：DD_belatedPNG

www.songxiaodong.com.cn

 

 

解決IE6下不支持 png24的透明圖片問題

引：http://www.cnblogs.com/heimanba/p/3826771.html

經常使用的兩種解決方案：

第一：使用IE濾鏡解決

關鍵代碼：

css代碼 

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/png24.png',sizingMethod='crop'); 

有幾點注意點：

1：這裏對應的src地址必定是相對於html頁面的不是相對於css路徑的。 

2： 只能對單張的 png圖片使用，意思是不能使用background-position的屬性。

3:   必須加上 _background:none 這段。

第二： 使用DD_belatedPNG的js代碼。

 使用DD_belatedPNG.js可完美的解決IE6下PNG圖片透明問題，而且支持backgrond-position與background-repeat. 這是其餘方法所不具有的，同時DD_belatedPNG還支持a:hover屬性,以及<img>。

 

使用方法：

首先下載JS文件：0.0.8a-min.js (壓縮版) 0.0.8a.js (未壓縮版本)

以後在頁面中引用代碼：

<!–[if IE 6]> <script type=」text/javascript」 src=」下載下來的JS路徑」></script> <script> DD_belatedPNG.fix(‘CSS選擇器, 應用類型’); </script> <![endif]–>

引用函數是 DD_belatedPNG.fix() , 括號裏分別填寫應用PNG的CSS選擇器（可以使用ID選擇器和類選擇器）和應用類型（分爲img和background兩種）。

1. 如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。
2. 更多選擇器的如 DD_belatedPNG.fix(‘#box-one, .header, img,background’);
3. 帶有hover效果的寫成  DD_belatedPNG.fix(‘#box-one, #box-one:hover’)

注意幾點:

第一：DD_belatedPNG插件式支持backgrond-position等定位方法。因此可使用"雪碧圖"

第二： DD_belatedPNG支持hover方法，可是必須把hover以後的class也寫進fix方法中去。

 

 

使用DD_belatedPNG的一些注意事項

引：http://blog.sina.com.cn/s/blog_8241e8510101ewmh.html

問題1： 爲何在iframe頁面裏使用了DD_belatedPNG後，頁面顯示空白？

辦法：找到如下代碼：

if (el.currentStyle.position == 'static') { el.style.position = 'relative' }

改爲：

if (el.currentStyle.position == 'static') { 

  if(el.nodeName.toLowerCase()!='html'){ 

        el.style.position = 'relative' 

  } 

}

從代碼上能夠看出來，是由於沒有排除html節點，因此整個頁面飄了。

注意：修改後有可能會引發別的問題！

問題2： 爲何在有些頁面裏使用了DD_belatedPNG後，圖片顯示不全，只顯示一部分？

辦法：找到如下代碼：

el.vml.image.fill.type = 'tile';
注:此部分代碼在DD_belatedPNG.js中fixPng方法內.

改爲：

el.vml.image.fill.type = 'frame';

緣由：好比有些圖片（png格式），原來是100px×100px的，你想用樣式或者標籤的屬性來縮放它到50px長寬，那麼這個圖片在IE6中不會被縮放，而是被剪切，只顯示圖片左上角的50px長寬，其它部分隱藏，並且也不是必現的，好像跟加載圖片速度有關係，慢的話容易出現。聽說這個BUG在新版中被解決，可是我試過了，確實解決了，可是又引發了別的問題，就是在常常切換div結構的時候，別切換的div有可能會樣式錯亂。因此修改或升級仍是須要謹慎。

問題3： 爲何在頁面裏使用了DD_belatedPNG後，個人圖片延遲加載（好比取_src的值，賦值給src）的功能失效？或者相似的動態修改圖片屬性失敗的問題？又或者我在圖片上的一些點擊事件等都失效？

首先說明一下爲何動態修改圖片屬性會失效(png圖片)

由於一開始頁面初始化以後，全部png圖片都被fix了一遍，即DD_belatedPNG會對已經fix以後的圖片設置一個私有屬性，具體就是VML的一些相關知識了吧，反正你不能再對他進行一些設置src屬性的一些操做了，包括點擊事件

可是若是你的圖片一開始是gif或別的，就沒事，不會受到影響，還能夠繼續設置src屬性

圖片延遲加載失效的分析

這樣圖片延遲加載失效，很好理解了。圖片延遲加載的原理就是，一開始圖片的src值是一個空白圖片，好比他 是一個gif圖片，固然若是一開始的空白圖片也是png，那就完全悲催了，後續也沒法被再次設置src。他初始化會對這個空白圖片fix，而後你後來再重 新設置src，能夠被設置成功，可是你會發現，從新設置後的png圖片仍是有灰色背景，沒有被再次正確fix，這是由於他認爲你已經被fix了，有了他自 己的私有屬性，不能再次fix。

解決辦法：

知道了緣由，就能找到解決辦法了，既然不能識別已經被fix的，那麼我能夠再次innerHTML一個圖片出來不就能夠了麼？一個全新的圖片！注意：你不能拿原來的圖片用，或者經過clone原始的圖片，生成一個新圖片，那樣也是不行的，由於你還不能去掉被fix後的私有屬性。

如下是實現的方法：

var replaceImg = (function(){ 

  var div = document_createElement_x_x_x('div'); 

  return function (oldImg, newImgHtml){    

        div.innerHTML = newImgHtml; 

  oldImg.parentNode.insertBefore(div.firstChild, oldImg); 

       oldImg.removeNode(true); 

 }

}()); 

var nextImg = dom.getElementsByTagName_r('img')[0]; 

replaceImg(nextImg,"

");

能夠看出，確實是從新弄一個圖片出來，這樣DD_belatedPNG就能夠識別了。