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

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就能够识别了。