眾所周知IE6不支持透明的PNG圖片,而PNG圖片在Web設計方面表現力上,具有其它圖形格式所達不到的效果,IE6這一致命缺陷極大地限制了Web設計的創意發揮。
雖然解決IE6的透明PNG的方法也很多,從使用IE特有的濾鏡或是expression,再到javascript+透明GIF替代.但是這些方法都有一個缺點,就是不支持CSS中backgrond-position與background-repeat屬性。而使用DD_belatedPNG.js可完美的解決IE6下PNG圖片透明問題,並且支持backgrond-position與background-repeat. 這是其他方法所不具備的,同時DD_belatedPNG還支持a:hover屬性,以及<img>。
我們的網站就加入了DD_belatedPNG處理導航PNG透明圖片,使其在不同瀏覽器下保持相同的外觀。
DD_belatedPNG 官方網站:點此訪問!
使用方法:1、首先下載JS文件:
| DD_belatedPNG_0.0.8a 未壓縮版本 |
| DD_belatedPNG_0.0.8a 壓縮版 |
之後在頁面中引用代碼:
- <!–[ifIE6]>
- <scripttype=text/javascriptsrc=下載下來的JS路徑></script>
- <script>
- DD_belatedPNG.fix('CSS選擇器,應用類型');
- </script>
- <![endif]–>
引用函數是DD_belatedPNG.fix() , 括號里分別填寫應用PNG的CSS選擇器(可使用ID選擇器和類選擇器)和應用類型(分為img 和background 兩種)。
如DD_belatedPNG.fix('#box-one, img ') 或者DD_belatedPNG.fix('.header, background ') 等。
這些可以簡寫成DD_belatedPNG.fix('#box-one, .header, img,background '); 。
更多選擇器的如DD_belatedPNG.fix('#box-one, .header,#footer,.box-two a:hover, img,background '); 等等。
另外,為解決IE6下背景圖閃爍,可以在頁面中添加如下腳本:
- <!–[ifIE6]>
- <scripttype=text/javascript>
- //<![CDATA[
- if((window.navigator.appName.toUpperCase().indexOf(MICROSOFT)>=0)&&(document.execCommand))
- try{
- document.execCommand(BackgroundImageCache,false,true);
- }
- catch(e){}
- //]]>
- </script>
- <![endif]–>