[兼容IE各版本] 同时使用多个 IE 滤镜

当 CSS3 遇上较低版本 IE,滤镜就成了实现兼容性的折衷方案之一。虽然滤镜是过时很久的技术了,但还是能看出微软的高瞻远瞩——早在 IE6 就用滤镜实现了 bug 丛生的 CSS3 特性。 以下是 MSDN 《Alpha Filter》 中同时使用多个滤镜的示例,适合各个 IE 版本。滤镜之间使用空格或者回车隔开(DEMO):

Blurry text with smudge of gray.</div>

然而,由于滤镜本身的缺陷,这种组合时不时会有意想不到的效果。例如,单独使用 shadow 滤镜是给盒子里的文字加阴影特效的(DEMO):

测试文字

配合 Glow 滤镜也很正常,可以加上发光效果(DEMO):

测试文字

然而,再加上 Gradiant 滤镜,所有的效果就都加在 div 盒子而不是文字上的了 (DEMO):

测试文字

这或许是因为 Gradiant 滤镜单独使用时就是只会应用在盒子上(DEMO)?

测试文字

总结

有的时候此法不好用,在于 IE 的滤镜本身。比如 IE 的 Shadow 滤镜和 Gradiant 滤镜配合只作用于盒子。退一步说,即便 Shadow 单独使用是文字阴影,有时也能看到难看的杂色(见配图,配图来自 鑫空间)。这里的“有时”和滤镜及文字所用的颜色以及浏览器都有关系。 灰色光晕下的效果 张鑫旭-鑫空间-鑫生活 鑫空间 的文章 《IE下实现类似CSS3 text-shadow文字阴影的几种方法》 推荐的,使用两段一模一样的文字交叠显示才是最终无 bug 阴影的跨浏览器解决方案。

参考资料

Alpha Filter http://msdn.microsoft.com/zh-cn/library/ie/ms532967(v=vs.85).aspx.aspx) Applying Filters (Windows Embedded CE 6.0) http://msdn.microsoft.com/zh-cn/library/ee492403.aspx