官网: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]-->
引用函数是 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.
问题
如果使用的是原版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