天天看点

关于css加载png后用jquery淡入淡出方式在各版本浏览器兼容的问题

用CSS做了PNG载入以及兼容问题,问题是解决了,但老板别出心裁要把那个东西做成淡入淡出,朋友用Jquery的fadeIn搞定了,但,这时问题就又来了,该样式加载的图片在firefox,IE5,IE6,IE7都没有问题,偏偏在IE8上出了问题,淡入淡出时PNG图片周边是黑的,他对我说,他这下没撤了,呵呵,其实,我说,解决方法你自己肯定知道,只是没加以组合罢了,他还和我争,结果我把方法告诉他,他才恍然大悟。

下面我就把方法和理论与大家分享一下,希望大家共同进步。

首先说明,用firefox的理论去评价IE的滤镜,确定、一定以及肯定是说不通的啊!!!

用jquery做png滤镜,在jquery里是有明确规定的,要区分IE和Firefox

你要处理适合IE滤镜的激变,就应该应用适用于IE滤镜的样式,虽然IE8做了background的PNG支持,但那也只是为了适用现在的用户需要啊。

你要用jquery的淡入效果处理IE里的PNG,IE里的PNG就必需用progid:DXImageTransform.Microsoft.AlphaImageLoader来加载,这一点你可以通过CSS的通用办法来解决,即是IE就用滤镜加载PNG,是Firefox就用背景来加载PNG,这一点,你也可以通过jquery的fixpng.js来处理(在这里我不提供下载,自己在网上找)。

在这里对各位说一句,没有一样IT软件是万能的,各方之间总会有些差异和优势,咱们都是做IT的,就事论事做好本份就好!

这里提供你们种CSS的写法,以便用jquery加载淡入淡出,供你们参考

background-image:url(******.png)!important;

background-image:url(../images/space.gif);

  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=scale);

最后说明一下,做任何一段程序,写什么做什么都是有因有果的,不要以自己的不知道、不明白,而随意去数落其它的任何事情。

继续阅读