让IE6支持PNG的各种方法

一、PNG8

Alpha透明的全色PNG(png32、png24）在ie6中会出现背景颜色，Alpha透明的PNG8在IE6下半透明部分显示为全透明，是透明Gif的加强版，在其它浏览器下正常显示半透明。Photoshop只能导出布尔透明的PNG8，Fireworks既能导出布尔透明的PNG8,也能导出alpha透明的PNG8。

Fireworks导出alpha透明的PNG8方法：文件→导出向导，图像预览中格式选择PNG8（Alpha透明度）。

二、滤镜

background:url(../images/logo.png) no-repeat 0 0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/logo.png",sizingMethod='crop');
_background:none;

sizingMethod：crop|scale|image

crop：以原图大小显示对容器没影响。

scale：根据容器大小拉伸图片尺寸。

image：根据图片尺寸调整容器大小。

此种方法的缺点是背景图片无法定位。

三、JS（滤镜原理）

pngfix是让IE6支持PNG的一个jquery插件，支持网页图片，背景图（可平铺定位），文本框背景图等。

下载地址：http://download.csdn.net/source/3518486

四、VML（DD_belatedPNG）

参考资料：http://www.dillerdesign.com/experiment/DD_belatedPNG/

引用代码：

<!--[if IE6]>
<scriptsrc="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg,.box,.img');
</script>
<![endif]-->

注意点：

1、不能在body中使用，因为VML是生成兄弟节点,而body不能生成与之相邻的节点

2、tr、td支持不好

3、不支持background-position:fixed;

4、不支持<inputtype="image"/>

优点：支持图片，背景，背景定位平铺。

缺点：页面加载后再使用JS生成显示出来的节点会失效；在某些IE6下会显示空白，原因与微软VML的更新补丁有关；页面上使用的元素较多时影响性能。

优先采用Alpha透明的PNG8图片，此方法只需改变图片格式而不依赖其它手段，操作简单。当此种方法不能满足需求时，用到较少PNG图时可采用滤镜，由于滤镜对性能影响较大，所以需要使用较多PNG图片时用DD_belatedPNG方法。具体做法视项目情况而定。