CSS技巧之二PNG Fix

大家都知道IE6对于CSS设计者来说，简直就是一坨屎，抱歉用这个词，但是我还真找不到其他更合适的词来形容它，当然仅限于CSS解析方面。

IE6有个大Bug就是不支持PNG图片的透明色，这就大大限制了页面的设计。目前网上有很多解决IE6下PNG透明色的方案，从使用IE特有的滤镜或是e­xpression,再到javascript+透明GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-image.

下面给大家介绍两个支持bacbackgrond-image的js插件。

Unit PNG Fix

原理

Unit PNG Fix工作原理是利用一个透明的gif图片来解决。

使用方法

首先加入js文件

 

 

<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
< ![endif]-->

 

把clear.gif文件拷贝到你的目录中，并在unitpngfix.js指定clear.gif的地址。

 

缺点

 

对于背景图片支持的不是很好，而且要添加另外的gif图片。

下载

DD_belatedPNG

原理

DD_belatedPNG 工作原理是利用VML技术来实现透明色。

 

使用方法

首先加入js文件

<!--[if lt IE 7]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('#id, .classname');
</script>
< ![endif]-->  

 

引入DD_belatedPNG.js，然后给输入的css class 应用解决方案。

缺点

需要一个一个的添加css类，比较麻烦，当然你可以输入DD_belatedPNG.fix('img,a,div,span, li') 这种大的css标签。

 

下载

总结

以上两个js插件，我更喜欢后者，它的稳定性更好，功能更强大，我一直用项目开发中使用后者。

 

更多信息，请浏览我的博客。