使用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