解决IE6的PNG透明JS插件 DD_belatedPNG

引：http://www.cnblogs.com/cobby/archive/2012/05/11/2495801.html

IE6的PNG透明是个老问题了，最近有朋友问我有没有最好的解决这个问题的插件。虽然知道且在用DD_belatedPNG这个插件，今天抽空把这个发上来。
虽然之前在博客里发过一款jquery的png插件，但是不支持背景平铺。
DD_belatedPNG使用了微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性，支持伪类。是一款不错的值得推荐的插件，用法也比较简单。

使用方法：

1 2 3 4 5 6

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

引用函数是DD_belatedPNG.fix()，括号里的 .png_bg 改成你的css选择器名称。

ID选择器例子：

1	DD_belatedPNG.fix('#png');

伪类例子：

1	DD_belatedPNG.fix('.png a:hover,.png a:focus');

img标签例子：

1	DD_belatedPNG.fix('img');

如果是多个直接加逗号（英文下的）就行。例如：

1	DD_belatedPNG.fix('.png_bg,#png,.png a:hover,.png a:focus,img');

JS文件下载地址：
0.0.8a.js (未压缩版本)
0.0.8a-min.js (压缩版)

官方网站：DD_belatedPNG

www.songxiaodong.com.cn

解决IE6下不支持 png24的透明图片问题

引：http://www.cnblogs.com/heimanba/p/3826771.html

常用的两种解决方案：

第一：使用IE滤镜解决

关键代码：

css代码 

_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='css/images/png24.png',sizingMethod='crop');

有几点注意点：

1：这里对应的src地址一定是相对于html页面的不是相对于css路径的。

2： 只能对单张的 png图片使用，意思是不能使用background-position的属性。

3:   必须加上 _background:none 这段。

第二： 使用DD_belatedPNG的js代码。

使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题，并且支持backgrond-position与background-repeat. 这是其他方法所不具备的，同时DD_belatedPNG还支持a:hover属性,以及<img>。

使用方法：

首先下载JS文件：0.0.8a-min.js (压缩版) 0.0.8a.js (未压缩版本)

之后在页面中引用代码：

<!–[if IE 6]> <script type=”text/javascript” src=”下载下来的JS路径”></script> <script> DD_belatedPNG.fix(‘CSS选择器, 应用类型’); </script> <![endif]–>

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用PNG的CSS选择器（可使用ID选择器和类选择器）和应用类型（分为img和background两种）。

1. 如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。
2. 更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header, img,background’);
3. 带有hover效果的写成  DD_belatedPNG.fix(‘#box-one, #box-one:hover’)

注意几点:

第一：DD_belatedPNG插件式支持backgrond-position等定位方法。所以可以使用"雪碧图"

第二： DD_belatedPNG支持hover方法，但是必须把hover之后的class也写进fix方法中去。

使用DD_belatedPNG的一些注意事项

引：http://blog.sina.com.cn/s/blog_8241e8510101ewmh.html

问题1： 为什么在iframe页面里使用了DD_belatedPNG后，页面显示空白？

办法：找到以下代码：

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

改成：

if (el.currentStyle.position == 'static') { 

  if(el.nodeName.toLowerCase()!='html'){ 

        el.style.position = 'relative' 

  } 

}

从代码上可以看出来，是因为没有排除html节点，所以整个页面飘了。

注意：修改后有可能会引起别的问题！

问题2： 为什么在有些页面里使用了DD_belatedPNG后，图片显示不全，只显示一部分？

办法：找到以下代码：

el.vml.image.fill.type = 'tile';注:此部分代码在DD_belatedPNG.js中fixPng方法内.

改成：

el.vml.image.fill.type = 'frame';

原因：比如有些图片（png格式），原来是100px×100px的，你想用样式或者标签的属性来缩放它到50px长宽，那么这个图片在IE6中不会被缩放，而是被剪切，只显示图片左上角的50px长宽，其它部分隐藏，而且也不是必现的，好像跟加载图片速度有关系，慢的话容易出现。据说这个BUG在新版中被解决，但是我试过了，确实解决了，但是又引起了别的问题，就是在经常切换div结构的时候，别切换的div有可能会样式错乱。所以修改或升级还是需要谨慎。

问题3： 为什么在页面里使用了DD_belatedPNG后，我的图片延迟加载（比如取_src的值，赋值给src）的功能失效？或者类似的动态修改图片属性失败的问题？又或者我在图片上的一些点击事件等都失效？

首先说明一下为什么动态修改图片属性会失效(png图片)

因为一开始页面初始化之后，所有png图片都被fix了一遍，即DD_belatedPNG会对已经fix之后的图片设置一个私有属性，具体就是VML的一些相关知识了吧，反正你不能再对他进行一些设置src属性的一些操作了，包括点击事件

但是如果你的图片一开始是gif或别的，就没事，不会受到影响，还可以继续设置src属性

图片延迟加载失效的分析

这样图片延迟加载失效，很好理解了。图片延迟加载的原理就是，一开始图片的src值是一个空白图片，比如他 是一个gif图片，当然如果一开始的空白图片也是png，那就彻底悲催了，后续也无法被再次设置src。他初始化会对这个空白图片fix，然后你后来再重 新设置src，可以被设置成功，但是你会发现，重新设置后的png图片还是有灰色背景，没有被再次正确fix，这是因为他认为你已经被fix了，有了他自 己的私有属性，不能再次fix。

解决办法：

知道了原因，就能找到解决办法了，既然不能识别已经被fix的，那么我可以再次innerHTML一个图片出来不就可以了么？一个全新的图片！注意：你不能拿原来的图片用，或者通过clone原始的图片，生成一个新图片，那样也是不行的，因为你还不能去掉被fix后的私有属性。

以下是实现的方法：

var replaceImg = (function(){ 

  var div = document_createElement_x_x_x('div'); 

  return function (oldImg, newImgHtml){    

        div.innerHTML = newImgHtml; 

  oldImg.parentNode.insertBefore(div.firstChild, oldImg); 

       oldImg.removeNode(true); 

 }

}()); 

var nextImg = dom.getElementsByTagName_r('img')[0]; 

replaceImg(nextImg,"

");

可以看出，确实是重新弄一个图片出来，这样DD_belatedPNG就可以识别了。