iepngfix.htc和png8让IE6支持png背景透明

今天搞PNG图片透明度的问题，网上找了些资料，觉得这个方法比较好

原文地址

http://www.cnblogs.com/dyg540/archive/2010/04/20/1716501.html

 

在给客户做网站的过程中，有一个比较棘手的问题就是处理png图片的背景透明问题，因为需要兼容不同的浏览器，这就比较麻烦了。

折腾了好长时间，最后寻找到了解决办法，用iepngfix.htc 进行处理。

iepngfix.htc的使用使用方法：

1. 下载脚本脚本，将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用；blank.gif是一个1×1像素的透明GIF图片，缺少该文件会使<img>标签插 入的PNG图象显示为红色的叉烧包。
2. 在iepngfix.htc中修改blank.gif的路径，var blankImg =‘blank.gif的正确路径’，这是惟一一个需要修改的配置。
3. 在css中将需要使用透明PNG的元素与.htc文件关联。 例如：*{behavior: url(iepngfix.htc) }

通过以上三步，IE6就能支持透明PNG图片了。

本来以为这样就万事大吉了，后来发现不仅如此！

在我们测试的过程中，本地环境处理已经没问题了；放在测试机上测试，也没问题了。

可是，最终到了生产机了，就突然发现不行了！在IE6下就会显示出蓝色的背景了。

找了半天原因，经过对比分析，发现代码和测试机上的一模一样，但问题依然存在，怎么办？

后来直接查找iepngfix.htc 网站，发现也没给出具体的服务器环境的需求问题。问题似乎解决不了了！！！

而且，将DEMO 文件上传至测试机和生产机上，发现原来问题就出在生产机上。测试机上显示的没任何问题，生产机确实就不行了。

这就排除了程序方面的差异问题。

后来，终于找到了另外的解决办法，那就是，替换之前的png图片的格式，之前的是png24的，现在全部替换成png8的，这样IE6就能识别出来而显示出背景透明的了！

所以，总结起来就是：

要想png图片背景透明：

最保险的办法是：将格式处理成png8的；

如果服务器上测试iepngfix.htc 没问题的话，使用iepngfix.htc也是不错的选择！

另外，想将png24转换成png8，方法也很简单，使用photoshop转换就可以了。

png24转换成png8的具体方法为： 文件-》存储为web和设备所用格式-》在“预设”里，选择“PNG-8”和“”透明度，保存即可。

 

以下是另一篇文章上看到的

缺陷：

1、使用PNG透明背景可能导致该元素内部链接无法点击，尤其在链接具有float属性 的时候，如：存在于一个浮动列表中的链接。推荐解决方法：使用display:inline代替float来实现块级元素的的横向排列。

2、img标签的插入的透明PNG图象无法使用右键保存，“另存为”只能取到覆盖在上面的blank.gif。什么？不要blank.gif？等着吃叉烧包吧。

3、作为背景的PNG图象无法被平铺，无法被定位 ，即background-repeat默认为no-repeat，而background-position彻底失效。

4、在页面刚载入的时候我们依旧能看到PNG图象因为IE6不支持而短暂出现的灰边，时间取决页面文件的大小和网络速度。

5、作者建议为使用PNG背景的元素设置一个固定宽度，但在我的使用中尚未发现width:auto会带来什么问题。

6、不支持低于5.5版本的浏览器，不过这个问题已经算不上问题。