您的位置：首页 > 其它

使用DD_belatedPNG让IE6支持PNG透明图片

2012-05-29 14:49 519 查看

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';
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航