日期:2014-05-17  浏览次数:20666 次

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插件,我更喜欢后者,它的稳定性更好,功能更强大,我一直用项目开发中使用后者。

?

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

?