官網:http://www.dillerdesign.com/experiment/DD_belatedPNG/
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]-->
<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>
<script type="text/javascript"> DD_belatedPNG.fix('*'); </script>
需要特別注意的是:
<TR>
and <TD>
elements do not play nicely yet. Do not attempt.
問題
如果使用的是原版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
0.0.8a.js (官方未壓縮版本, ~12Kb) 0.0.8a-min.js (官方壓縮版, ~7Kb)
參考資料來源:
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