IE6下PNG圖像透明解決方案

IE真的是一個蛋疼的東西,雖然很不想用IE的瀏覽器了,但很多時候,工作中還不得不對其進行兼容。其中PNG的半透明在IE6中就是一個很麻煩的需要兼容的事情。筆者收集和整理了以下的一些方法來進行處理PNG在IE6中的半透明。具體請往下看。

一、CSS 濾鏡(兩種方法)

一般能用CSS處理的就儘量不要用JS了,箇中的原因,你懂的……
  本人整理了一下使用濾鏡的方法處理IE6下的PNG半透明,但該方法也有侷限性,不能使用背景定位,也就是不能使用CSS Script,具體可以看DEMO,點擊進行查看

二、DD_belatedPNG

DD_belatedPNG完美地解決了"iepngfix.htc"會出現的無法平鋪,沒法定位以及所加超鏈接的點擊區域無法使用等問題!

詳細文檔見http://dillerdesign.com/experiment/DD_belatedPNG/。這裏就不提供翻譯了,哪位大大有時間有精力就來個翻譯文檔吧。08年末這東西剛出來的時候國內就有人發過這個方法,但不知道爲什麼,沒引起什麼"效應",很多人還是在用上面說的"更具侷限性"的方法。

使用方法很簡單,首先下載調用JS,然後在使用PNG的頁面中引用代碼,由於是針對IE6處理的,所以在外圍加上IE6的條件註釋,以便區別於其他瀏覽器。完整的代碼如下: 

       
  1. <!--[ifIE6]>
  2.    
  3. <script type="text/javascript"src="下載下來的JS路徑"></script>
  4.    
  5. <script type="text/javascript">
  6.    
  7.       DD_belatedPNG.fix('CSS選擇器, 應用類型');
  8.    
  9. </script>
  10.    
  11. <![endif]-->
  12.  

引用函數是 DD_belatedPNG.fix() , 括號裏分別填寫應用PNG圖片透明的CSS選擇器(可使用ID選擇器和類選擇器)和應用類型(分爲img和background兩種)支持多個選擇器的使用,支持hove的事件,和CSS的寫法是一樣的,最後兩個是寫應用的類型就可以了,最後完整的應用代碼如下(注意必須是在全英文的狀態下輸入,很多人老是問我是什麼原因不起作用,其實是因爲輸入了中文的標點):

單選擇器和單應用類型: 

       
  1. DD_belatedPNG.fix('#box-one,img') 
  2.    
  3. DD_belatedPNG.fix('.header, background')
  4.  

更多選擇器多應用類型: 

       
  1. DD_belatedPNG.fix('#box-one, .header,#footer,.box-two a:hover, img,background');
  2.  

另外,爲解決IE6下背景圖閃爍,可以定義下html的CSS

 
html{filter:expression(document.execCommand("BackgroundImageCache",false,true));}

注:要注意上面選擇器的標點要在英文的狀態下,不然是沒有效果的!具體使用可以看DEMO,點擊進行查看

DD_belatedPNG下載(內含壓縮版和沒壓縮的版本): 點擊進行下載

IE6下的效果對比如下:
  png32半透明在IE6下的效果對比

我相信,還有更好的兼容方式,希望大家在有更好的方法的時候,可與我一同分享,感謝你的閱讀!

作者:黃錦誠

文章來源:aqy106.com

注:相關網站建設技巧閱讀請移步到建站教程頻道。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章