使用Filters填充CSS3跨浏览器问题及兼容低版本IE（转）
跨浏览器兼容性是网页制作中永恒的难题。 不管浏览器厂商都在试图在自己的浏览器中实现旧式的css3标准功能css3圆角兼容，但它们都是以扩展样式的形式提供的，所以以后样式表中的-moz-、-webkit- 、(-ms-、-o-)等前缀会常年存在。
另外，虽然所有有意拓展自身市场的浏览器厂商都提供了CSS3的新功能，但鉴于用户主机上仍然存在其旧版本浏览器（主要是Google的ie6、7、8），除了考虑到浏览器之间的兼容性，我们还需要向前兼容旧浏览器。
这些老浏览器（低版本ie）不支持css3，这确实是阻碍我们进入css3时代的一大障碍。
幸运的是，当ie指责w3c标准时，它自己的一套Filters有长远的眼光。 在这个Filters过滤器中，很多效果正是我们目前在CSS3中实现的。
对于Filters过滤器，我们不建议单独使用，只作为解决兼容性时的一个选项。
下面我们将解决以下低版本浏览器的问题：
ie6下不支持透明png；
不支持ie6,7,8下的阴影（box-shadow、text-shadow）效果；
不支持ie6、7、8下的渐变（Gradients）效果；
ie6,7,8不支持rgba（通常用作半透明层）。
解决ie6不支持24位透明png的问题
第一个问题很常见，其实有两种解决方案，
一种是使用ie过滤器：AlphaImageLoader
<html > <head> <meta charset="utf-8" /> <title>使用AlphaImageLoader滤镜支持ie6的透明png</title> <style> .pngBg{ width:160px;height:240px;background: url(//img.jbzj.com/file_images/article/201301/2013123145523265.png); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='//img.jbzj.com/file_images/article/201301/2013123145523265.png',sizingMethod='scale'); /* sizingMethod参数还可以是image,crop */ } </style> </head> <body> <div class='pngBg'> 请尝试使用ie6 </div> </body> </html>
提示：运行前可以更改部分代码
使用此滤镜后，仍然存在一些无法填充的问题，例如图片重复等。
之前，我极力推荐另一种解决方案：使用VML，称其为完美的解决方案。 代码DD_belatedPNG已经封装在这个js中
但后来我发现使用VML的效率问题比AlphaImageLoader更严重，所以要谨慎。
解决ie6、7、8下不支持阴影（box-shadow、text-shadow）效果
现在很多网站为了美观，采用了很多css3样式，其中使用最多的是box-shadow和text-shadow。
下面我们使用Blur和dropShadow滤镜在ie6、7、8中实现这些效果：
<html> <head> <meta charset="UTF-8" /> <title>Blur滤镜模拟box-shadow,dropShadow滤镜模拟text-shadow</title> <style type="text/css"> body{ position:relative; color:#c00; font-family:'黑体'; font-size:20px; background:#cfc; } .shadow{ width:200px;height:100px; background:#fff; border:1px solid #ccc; } .shadow span{zoom:1;filter:progid:DXImageTransform.Microsoft.dropShadow( Color=cccccc,offX=2,offY=1,positive=true); } .ieShadow{ position:absolute;width:200px;height:100px;z-index:-1; background: #333; top:-5px;left:-5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6', MakeShadow='true', ShadowOpacity='0.3'); } </style> </head> <body> <div class="wrap"> <div class='ieShadow'></div> <div class='shadow'> <span>文字shadow</span> </div> </div> </body> </html>
提示：运行前可以更改部分代码
ie的过滤器只有在触发haslayout时才会生效（ie8除外，已经放弃了haslayout的私有属性），这就是为什么我们添加了一个zoom: 1;
另外，当使用dropShadow滤镜进行文本阴影时，不应该使用背景，否则阴影效果将在背景上起作用，因此我们将dropShadow滤镜添加到span而不是class=shadow图层中。
对于box-shadow的效果，我们还额外添加了一层class=ieShadow，然后使用模糊滤镜来模拟。 其实滤镜中有一个Shadow滤镜，不需要这个额外的图层，但是效果不好，所以我们没有使用。
接下来我们做一个兼容所有浏览器的demo。
<html> <head> <meta charset="UTF-8" /> <title>块阴影（Firefox,Safari, Chrome,opera）与文字阴影(Firefox 3.1,Safari,Opera,chrome)</title> <style type="text/css"> body{ position:relative; color:#c00; font-family:'黑体'; font-size:20px; background:#cfc; } .shadow{ width:200px;height:100px; background:#fff; border:1px solid #ccc; box-shadow: 1px 1px 10px rgba(200,200,200,0.9); -webkit-box-shadow:1px 1px 10px rgba(200,200,200,0.9) ; -moz-box-shadow: 1px 1px 10px rgba(200,200,200,0.9) ; } .shadow span{ zoom:1;filter:progid:DXImageTransform.Microsoft.dropShadow( Color=cccccc,offX=2,offY=1,positive=true); text-shadow: 2px 1px 2px #ccc; } .ieShadow{ display:none; display:block9; position:absolute;width:200px;height:100px;z-index:-1; background: #ccc; top:-5px;left:-5px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='6', MakeShadow='true', ShadowOpacity='0.2'); } </style> </head> <body> <div class="wrap"> <div class='ieShadow'></div> <div class='shadow'> <span>文字shadow</span> </div> </div> </body> </html>
提示：运行前可以更改部分代码
解决ie6,7,8下Gradients不支持的效果
由于有了渐变的css3属性，我们很多设计效果都不需要裁剪图片，直接用代码实现即可，而且限制比图片小。
为了弥补低版本ie中对渐变支持的不足，我们可以使用渐变滤镜。
ie的渐变滤镜只支持线性渐变，并且只能设置两种渐变颜色，但是这里要注意的是，这个渐变颜色可以设置alpha透明度。
<html> <head> <meta charset="UTF-8" /> <title>ie6下的gradient滤镜线性渐变</title> <style type="text/css"> .Box{ width:300px;height:200px; filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #FEFEFE, endColorstr = #E0E0E2); } </style> </head> <body> <div class='Box'>渐变背景</div> </body> </html>
提示：运行前可以更改部分代码
我们正在研究各种浏览器的兼容性。 不幸的是，opera 不支持它。
<html> <head> <meta charset="UTF-8" /> <title>线性渐变(未支持opera)</title> <style type="text/css"> .Box{ width:300px;height:200px; background:linear-gradient(top, #FEFEFE, #E0E0E2 ); background:-moz-linear-gradient(top, #FEFEFE, #E0E0E2 ); background:-webkit-gradient(linear, 50% 0, 50% 100%, from(#FEFEFE), to(#E0E0E2)); /* webkit老式写法 */ background:-webkit-linear-gradient(0, #FEFEFE, #E0E0E2 ); /* webkit新式写法 */ filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 0, startColorstr = #FEFEFE, endColorstr = #E0E0E2); } </style> </head> <body> <div class='Box'>渐变背景</div> </body> </html>
提示：运行前可以更改部分代码
解决ie6、7、8下不支持rgba（一般用作半透明层）
这第四个问题很常见，网上到处都可以看到低版本ie的解决方案，就是半透明层的效果。
由于ie不支持rgba颜色，所以我们通常使用ie的alpha滤镜来实现半透明的效果。 不过，就像我们前面提到的box-shadow的模拟例子一样，这个alpha滤镜和里面的模糊滤镜都是针对一个layer元素内的所有子元素，包括文本节点。 因此，一旦使用了alpha滤镜，这个元素下面的所有东西都是透明的，这往往与我们想要的效果不一致。
网上通常的解决方案和之前模拟box-shadow的blur滤镜一样，将透明层提取成单层。
<html> <head> <meta charset="UTF-8" /> <title>ie半透明层</title> <style type="text/css"> body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; } .ieAlpha{ position:absolute;z-index:-1;top:0;left:0;width:300px;height:200px;background:#333; filter:alpha(opacity=30); } </style> </head> <body> <div class='Box'> <div class='ieAlpha'></div> 透明背景 </div> </body> </html>
提示：运行前可以更改部分代码
这种方法比较常用，但是多出来的一层确实是多余的，而且有时控制起来比较麻烦。
我们可以改变滤镜的方式：在前面的渐变滤镜中，我们讲到渐变颜色也可以使用alpha半透明值，而这个渐变滤镜是针对元素背景的，元素内容不会受其影响。
那么我们可以这样实现：
<html> <head> <meta charset="UTF-8" /> <title>利用gradient实现半透明层</title> <style type="text/css"> body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 1,startColorstr = #66000000,endColorstr = #66000000); } </style> </head> <body> <div class='Box'> 透明背景 </div> </body> </html>
提示：运行前可以更改部分代码
显然，结构和风格简单多了，让我们让它兼容其他浏览器：
<html> <head> <meta charset="UTF-8" /> <title>半透明层</title> <style type="text/css"> body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; background:rgba(0,0,0,0.35); /* 这里也不独立使用opacity了 */ filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 1,startColorstr = #66000000,endColorstr = #66000000); } </style> </head> <body> <div class='Box'> 透明背景 </div> </body> </html>
提示：运行前可以更改部分代码
虽然我们已经解决了上面四个低版本ie的不足，但是在解决的过程中，有些地方还是有点复杂，而且具体应用中的情况似乎并没有那么简单，读者了解后再展开。
除了以上四个问题正在解决之外，CSS3还有太多的疗效在低版本浏览器中难以实现，而不得不放弃（在低版本浏览器中），其中最遗憾的是CSS3圆角疗效css3圆角兼容，当然使用VML也可以解决，封装方法：弯角，和DD_belatedPNG一样，我还是建议读者慎重使用。
