使用DD_belatedPNG讓IE6支持PNG透明圖片

DD_belatedPNG

官網：http://www.dillerdesign.com/experiment/DD_belatedPNG/

使用

附實例rar下載

 1.在官網下載腳本文件到本地相應文件夾

0.0.8a.js (官方未壓縮版本, ~12Kb)
0.0.8a-min.js (官方壓縮版, ~7Kb)

 2.在相關頁面的head標簽內添加如下代碼

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

引用函數是 DD_belatedPNG.fix() , 括號里分別填寫應用 PNG-24 的 CSS 選擇器（可使用ID選擇器和類選擇器）和應用類型（分為 img 標簽和 background 屬性兩種）。

如

<script type="text/javascript">
DD_belatedPNG.fix('#box, img');
</script>

或者

<script type="text/javascript">
DD_belatedPNG.fix('.header, background');
</script>

也可以簡寫成

<script type="text/javascript">
DD_belatedPNG.fix('#box-one, .header, img, background');
</script>

或者像本例子中直接使用 * 號，表示應用所有 css 選擇器及 xhtml 標簽。

<script type="text/javascript">
DD_belatedPNG.fix('*');
</script>

 需要特別注意的是：

<TR> and <TD> elements do not play nicely yet. Do not attempt.

在ie6下iframe頁面顯示空白的bug解決方案

問題

如果使用的是原版DD_belatedPNG.js。

在iframe的子頁面中使用DD_belatedPNG處理PNG圖片時，整個子頁面顯示為空白

則需修改第137行（個版本代碼行數可能不一樣），代碼如下：

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

這里的元素沒有排除HTML節點，把HTML的position也設為relative了。

OK 明白問題的原因就好解決了，直接修改代碼如下：

if (el.currentStyle.position == 'static') {
    if(el.nodeName!='HTML')
    el.style.position = 'relative';
}

說明：在原文中el為b

相關資料

附實例rar下載

0.0.8a.js (官方未壓縮版本, ~12Kb) 0.0.8a-min.js (官方壓縮版, ~7Kb)

參考資料來源：

使用DD_belatedPNG的一些注意事項

http://www.dillerdesign.com/experiment/DD_belatedPNG/

http://blog.e8it.net/iframe-dd_belatedpng-bug/#comment-323

http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/

http://www.cssue.com/javascript-jquery/dd_belatedpng-ie6-png24.html

http://www.cnblogs.com/blacksheep/archive/2011/04/12/2013316.html

http://254918099-qq-com.iteye.com/blog/1468588