ie6的png24问题
解决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
解决IE6下不支持 png24的透明图片问题
常用的两种解决方案：
第一：使用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两种）。
- 如DD_belatedPNG.fix(‘#box-one, img’) 或者 DD_belatedPNG.fix(‘.header, background’) 等。
- 更多选择器的如 DD_belatedPNG.fix(‘#box-one, .header, img,background’);
- 带有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就可以识别了。
