使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE


跨浏览器兼容性是网页制作永恒的难题。别看各浏览器厂商都努力在自己的浏览器中实现新式的css3标准特性,但都是以扩展样式的形式提供的, 所以在未来一段时间里,样式表里的-moz-,-webkit-,(-ms-,-o-)等等前缀将长期存在。

另外,虽说各家有志于扩张自己市场的浏览器厂商都提供了css3的新特性,但鉴于其老式版本的浏览器依然存在于用户的主机上(主要是微软旗下的ie6,7,8),除了考虑各家浏览器之间的兼容性外,我们还有必要向前兼容老式浏览器。

这些老式浏览器(低版本ie)对于css3的不支持问题,真是阻碍我们迈向css3时代的一大障碍。
不幸之幸,当年ie在轻视w3c标准之时,自成一套的Filters滤镜却是具备长远眼光的。在这些Filters滤镜中,不少效果正是我们CSS3中目前实现的。
对于Filters滤镜,我们不建议单独使用,只作为解决兼容性时候的一个选择。
下面我们将解决以下低版本浏览器的问题
1. ie6下对透明png的不支持;
2. ie6,7,8下阴影(box-shadow,text-shadow)效果的不支持;
3. ie6,7,8下渐变(Gradients)效果的不支持;
4. ie6,7,8下对rgba的不支持(一般用来做半透明层)。

1. 解决ie6对24位透明png的不支持
第一个问题非常常见,其实有两个解决方法,
一个就是使用ie滤镜:AlphaImageLoader



提示:您可以先修改部分代码再运行

使用这个滤镜之后,仍然是有一些问题没法弥补的,比如图片的repeat等等。
之前,我曾极力推荐过另外一个解决方法:使用VML,称之为完美解决方案。在这个js里已经封装好代码DD_belatedPNG
但是后来发现,使用VML效率问题比AlphaImageLoader更甚,君当慎之。

2. 解决ie6,7,8下对阴影(box-shadow,text-shadow)效果的不支持
现在很多网站为求美观采用了很多css3的样式,其中box-shadow和text-shadow的使用率最高。
下面我们就利用Blur和dropShadow滤镜在ie6,7,8中实现这种效果:



提示:您可以先修改部分代码再运行

ie的滤镜是必须要在触发haslayout情况下才能生效的(ie8除外,它已经抛弃了haslayout这个私有属性),这就是为什么我们在那里加了个zoom:1;
另外,当使用dropShadow滤镜做文字阴影时,就不应该使用background,否则阴影效果是对背景起作用了,所以我们将dropShadow滤镜加在了span上而不是class=shadow层上。
做box-shadow效果,我们还多加了一层class=ieShadow,然后使用blur滤镜来模拟的。其实滤镜中还有个Shadow滤镜,可以不需要这个额外层,但是效果并不好,所以我们并没有采用。
下面,我们做一个兼容所有浏览器的demo。



提示:您可以先修改部分代码再运行

3. 解决ie6,7,8下渐变(Gradients)效果的不支持
自从有了gradient渐变这个css3属性后,很多设计效果我们就不需要去切图了,直接使用代码就能实现,并且相对图片来说局限性更小。
为了弥补ie低版本下对gradient的不支持,我们可以使用Gradient滤镜。
ie的Gradient滤镜只支持线性渐变,且只能设置两个渐变色,不过这里注意一下,这个渐变颜色可以设置alpha透明度。



提示:您可以先修改部分代码再运行

我们在看一下各浏览器兼容性的写法,遗憾的是opera并未支持。



提示:您可以先修改部分代码再运行

4. 解决ie6,7,8下对rgba的不支持(一般用来做半透明层)
这第四个问题,非常普遍,而且ie低版本下的解决方法在网上也是随处可见,就是半透明层的效果。
因为ie不支持rgba色,所以我们一般都使用ie的alpha滤镜来达到半透明效果,但是,同我们上面举的box-shadow的模拟例子一样,这个alpha滤镜和上面的blur滤镜都是针对层元素内所有子元素且包括文本节点的。所以,一旦使用了alpha滤镜,那么这个元素下面的所有东西都透明了,这常常和我们要的效果不一致。
网上一般的解决方法同上面的模拟box-shadow的blur滤镜一样,将透明层单独提取成一个层。



提示:您可以先修改部分代码再运行

这种方法使用的比较普遍,但是多加的一层实在有些多余,并且有时候控制起来还比较麻烦。
我们可以换一个滤镜方法:在上面的渐变的滤镜里,我们提到了渐变色也可以使用alpha半透明值,并且这个渐变滤镜是针对于元素背景的,元素内容并不会受其影响。
那么我们可以这样实现



提示:您可以先修改部分代码再运行

显然结构,样式简单多了,再做一下其他浏览器的兼容性:



提示:您可以先修改部分代码再运行

虽然我们以上解决了四种ie低版本下的不足,但在解决的过程中某些地方还是稍显繁复了,且在具体应用当中的情况或许并没有这么简单,读者当理解之后再做延伸。
除了以上四种问题被解决之外,还是有太多的css3效果在ie低版本下是无法实现的,我们不得不(在低版本浏览器中)放弃之,其中最最最遗憾的就是css3圆角效果了,当然使用VML也是能解决,封装的方法:Curved corner,同DD_belatedPNG一样,我还是建议读者谨慎采用。
ie各个Filters静态滤镜演示Demo:DXTidemo



相关阅读:
CSS position:absolute全面了解
Mac怎么访问Windows共享文件?苹果Mac打开Windows系统共享文件的方法图解
JS数组的遍历方式for循环与for...in
subsonic3.0插件更新字符串过长引发的异常修复方法
jquery图片倾斜层叠切换特效代码分享
JS实现网站菜单拖拽移位效果的方法
使用JQuery实现智能表单验证功能
jQuery避免$符和其他JS库冲突的方法对比
Win7系统桌面和开始菜单找不到ie浏览器图标问题的解决方法
Java基础教程之封装与接口
ThinkPHP后台首页index使用frameset时的注意事项分析
X/HTML5 和 XHTML2
js文字横向滚动特效
java多线程下载实例详解
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 青春忧伤句子 血脉深处的守望 高中高三作文1000字:梦入塞下魂千萦 儿时的光 国际贸易中独立担保欺诈及滥用风险防范 校内的白玉兰作文500字 树,一定会多起来的450字 哪吒大战红孩儿读后感400字 描写星星月亮的成语 成立党的群众路线教育实践活动领导小组、办公室及督导组的通知 纪念币作文400字 欢歌笑语造句 欢歌笑语的意思 欢歌笑语的近义词和反义词 高中高三作文1000字:快乐的庐山之旅 醉生梦死的深夜 中学生仪容仪表演讲稿 童年的欢乐作文400字 《动手做做看》教学设计 爱情短语表达心情:幸福有时候真的与爱情无关 外婆作文700字 “爱美”的男生 古城笑靥 小学六年级作文600字:爱心被骗 描写六月的优美好句子 2015学生严以律己演讲稿 撕破伪装,我依然是自己 两个白雪公主作文900字 完美,玩爱 借我一方思念 科普之冬工作总结 清明随笔 挖河蚌400字 绝世高手作文3000字 好公司是什么样的呢 中秋之夜500字 在天上的家 医生医疗纠纷检讨书 3人年会滑稽小品剧本《三个孕妇》 大学生假期保安实习报告经典范文 幸福与否,只在你的心怎样的看待作文800字 啥?一千元 本子的哀诉200字 情感日志 前方会有更绚丽的彩虹 夹豆子比赛作文800字 我聪明还是笨作文400字 等待,清明500字 描写青春的正能量励志唯美句子大全 孤单天使泪作文400字 积累生命的财富 2016届毕业论文开题报告 社区创建文化先进社区工作汇报

Copyright © 2016 phpStudy |