基于 CSS3 的下一代 Web 应用开发，第 3 部分: 在 IE 中的特殊处理

 

Opacity 透明度

透明度属性是 CSS 中非常常用和流行的一个属性，目前已经广泛被主要浏览器支持，可惜的是 IE6/7/8 均不支持该属性。虽然 IE 没有支持这个 CSS 属性，但是我们可以通过使用 IE 特有的滤镜 filter 属性来实现相同效果。

清单 1. Opacity 代码示例

				 
 opacity: 0.4; /*Chrome、Safari、Firefox、Opera */ 
 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* IE6/IE7/8 */ 
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*  IE8 */ 

如上面代码所示，第一行是在其他浏览器中使用 Opacity 属性；第二行是 IE6/7/8 中使用滤镜属性设置透明度；第三行是新的 IE 滤镜属性，它只在 IE8 中起作用在其他浏览器中会被忽略，如果不是针对 IE8 设置，使用第二行代码就可以了。参数的设置与 CSS 中 Opacity 属性也基本相同，在 IE 滤镜中使用 0-100 表示透明度，因此 opacity=40 相当于 Opacity 属性为 0.4，亦即透明度为 40%。使用该滤镜属性有两个缺点：由于使用了 Microsoft 特有的属性，会使得你的 CSS 非验证的；另外，IE 的滤镜属性会使得所有的 HTML 子节点都继承这个属性。

图 1.IE 浏览器中透明度演示
 

 

Border-Radius 圆角效果

圆角效果是 CSS3 中另一个非常常用和流行的效果。它使得程序员不再需要费力的拼装很多圆角图片或者使用大量复杂的 JavaScript 来实现的相同的效果。在很大程度上圆角属性简化了 HTML 代码结构，同时优化了显示效果。然而 IE 全系列浏览器依然不支持这个属性。幸运的是 Remiz Rahnas使用 VML 编写了一个 HTC 文件，为 IE 浏览器提供圆角效果的支持。

清单 2. 圆角代码示例

				 
 -moz-border-radius: 15px; /*Firefox*/ 
 -webkit-border-radius: 15px; /*Safari、Chrome*/ 
 border-radius: 15px; /*Opera 10.5+、IE 6+*/ 
 behavior: url(ie-css3.htc); /* 调用脚本添加圆角效果 */ 

如上面代码所示，圆角属性的使用和 CSS 圆角属性一致，只是在后面多添加了一句 behavior: url(ie-css3.htc)。behavior 属性只被 IE 浏览器支持和识别，用来告诉 IE 在哪些设置了该样式 Class 的元素上调用脚本添加圆角效果。一句简洁的代码就使得 IE 支持圆角效果，而不需要你额外的维护任何代码。然而这种折中的方法也有一些缺陷：首先，在 Server 端需要引入一个 HTC 文件，经过 gzip 压缩后对 server 端和 client 端性能应该不会有太大的影响；其次，它会使你的 CSS 验证不合法；另外，这个脚本在 IE8 上有一些问题，它会使 z-index 值变成负数。因此使用时还需要小心。

图 2.IE 浏览器中圆角效果演示
 

 

Box Shadow 盒阴影

盒阴影是另一个 CSS3 中的很有用的属性，它使得程序员可以通过简单的添加一个属性，就创建出一个立体效果带有阴影的元素。在 IE 全系列浏览器中依然在不支持这个属性，但 IE 为这个效果提供了滤镜属性；另外和上面圆角效果一样，我们可以通过 VML 脚本来实现这个效果。

清单 3.Box Shadow 的滤镜实现代码

				 
 -moz-box-shadow: 2px 2px 3px #969696; /* Firefox 3.5+ */ 
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ 
 filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', 
 Direction=145, Strength=3); 

清单 4.Box Shadow 的 VML 脚本实现

				 
 -moz-box-shadow: 2px 2px 3px #969696; /* Firefox */ 
 -webkit-box-shadow: 2px 2px 3px #969696; /* Safari and Chrome */ 
 box-shadow: 2px 2px 3px #969696; /* Opera 10.5+、IE6+*/ 
 behavior: url(ie-css3.htc); /* 调用脚本添加阴影效果 */ 

如上面代码所示，上面两种方法均可实现这个效果。但是要注意的是，IE 滤镜效果语法与其他浏览器中 CSS3 属性语法不同。因此需要开发人员仔细调试使得在不同浏览器中看起来有相同的效果。

图 3.IE 浏览器中盒阴影效果演示
 

 

Text Shadow

文字阴影在不仅流行于打印效果中，同时也在 Web 设计中也非常流行。然而对于 Text Shadow 这个属性我们就没有那么好运气了，IE 没有提供相应的滤镜效果，也没有现成的 VML 脚本可以使用。在过去的 Web 开发中，我们通常使用图片来实现文字阴影效果。Kilian Valkhof为了解决 IE 下实现文字阴影这个难题，而编写了一个 jQuery 的插件。

清单 5.IE 浏览器中实现 Text Shadow 效果代码

				 
 text-shadow: #aaa 5px 5px 8px; 

 $(document).ready(function(){ 
 $(".text-shadow").textShadow(); 
 }); 

如上面代码所示，下载了 jQuery 核心包和 Drop Shadow 插件后我们就可以在 IE 中使用文字阴影效果了。textShadow() 方法还可以填入一个 JavaScript 对象参数，如下表所示：

表 1.textShadow 属性参数表

属性名	类型	默认值	描述
left	整型	4	阴影距离
top	整型	4	阴影角度
blur	整型	2	阴影扩散度
opacity	0-1 小数	0.5	阴影透明度
color	颜色值	black	字体阴影颜色
swap	布尔	false	是否换行

图 4.Text Shadow 演示图
 

 

Gradients 渐变色

CSS3 中的渐变色为渐变背景色提供了很大的方便，我们不必为了渐变的背景色使用大量细小的图片，同时也不用为了适应浏览器分辨率做很多工作。尽管 IE 浏览器还是不支持该属性，我们依然可以通过 IE 是由的滤镜属性实现该效果。

清单 6.IE 浏览器中实现渐变色

				 
 background-image: -moz-linear-gradient(top, #81a8cb, #4477a1); /* Firefox 3.6 */ 
 background-image: -webkit-gradient(linear,left bottom,left top,
 color-stop(0, #4477a1),color-stop(1, #81a8cb)); /* Safari & Chrome */ 
 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr='#81a8cb', endColorstr='#4477a1'); /* IE6 & IE7 */ 
 -ms-filter:"progid:DXImageTransform.Microsofkt.gradient(GradientType=0,
 startColorstr='#81a8cb', endColorstr='#4477a1')"; /* IE8 */ 

如上面代码所示，我们可以使用 IE 的私有的滤镜来实现该效果。其中 GradientType 可以有两个选项值 0 和 1，分别代表水平渐变和垂直渐变。startColorstr 和 endColorstr 分别代表渐变开始的颜色值和结束的颜色值。虽然参数和功能不如 CSS3 中的渐变多，但是对已一般的需求来说也算够用了。另外该滤镜属性在 IE6/7 和 IE8 中支持的语法不相同，因此我们需要写不同的代码去做 IE6/7 和 IE8 的兼容处理。

图 5.IE 浏览器渐变色演示
 

 

RGBA 颜色

CSS3 中提供了另一种方式设置背景透明度，那就是 RGBA 颜色。RGBA 颜色使得开发人员在指定颜色时，不仅可以指定 R、G、B 三原色的值，同时还可以指定颜色的透明度。这样我们就就可以在浏览器中实现类似 Windows7 中一样透明的玻璃效果，这大大增强了 Web 程序的视觉感官体验。在 IE 全系列浏览器中依然不支持 RGBA 颜色，我们只能利用 IE 滤镜模拟实现这样的效果。

清单 7.IE 浏览器 RGBA 颜色实现代码

				 
 background: rgba(50, 95, 224, .4); 
 filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,
 startColorstr='#886287a7', endColorstr='#886287a7'); 

如上面代码所示，利用 IE 中渐变色滤镜将渐变开始颜色和结束颜色设置相同，能模拟出和其他浏览器十分类似的 RGBA 颜色效果。另外为了在 IE 中获得较好的透明背景效果，使用 PNG 图片作为背景图片也是一个很不错的选择。不过这样做的缺点是你不得不处理大量的图片，同时为了适应图片背景不得不修改 HTML 的结构。

图 6.IE 浏览器中滤镜实现 RGBA 颜色效果
 

 

Rotation 旋转

在最新的 Firefox 和 Webkit 浏览器中都对 CSS3 形变和动画效果做了不同程度的支持。你可以旋转、拉伸、平移一个 HTML 元素来实现以前只能用图片实现的立体效果，也可以使用 CSS 属性来实现绚丽的淡入、淡出等动画效果。目前 IE 全系列浏览器还不支持该属性，但是很少有人知道使用 IE 的滤镜可以实现简单的 HTML 元素旋转的效果。

清单 8.IE 浏览器中实现旋转

				 
 -webkit-transform: rotate(90deg); 
 -moz-transform: rotate(90deg); 
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); 

如上面代码所示，最后一行代码在 IE 中实现旋转效果。其中的参数 rotation 的选项为 1、2、3 和四，分别代表旋转 90 度、180 度、270 度和 360 度。和 CSS3 中的旋转 360 度功能相比，IE 中的旋转滤镜功能就显得十分有限了，每次 90 度的旋转很难满足开发人员的需求。

另外 dojo 在 1.5 版本对 CSS3 中的 transform 属性开始有一定的支持，其中包括了 matrix、rotate、skew、scale、translate 等功能。如果有 CSS3 形变需求的话，可以参考使用 dojo 对这部分功能的扩展。

清单 9. 使用 dojo 设置 HTML 元素旋转

				 
 dojox.html.ext-dojo.style("transform","rotate(10deg)"); 

图 7.IE 浏览器中滤镜实现 HTML 元素旋转
 

 

小结

CSS3 虽然还没有正式发布，但是各个浏览器厂商已经开始部分支持这些新特性了。这些新特性的支持给我来带了很多惊喜，使我们很容易实现我们意想不到的华丽的效果，简化了很多前端实现的代码。但是 CSS3 也给我们带来了很多困扰，各个浏览器厂商对 CSS3 标准支持不一致，尤其是特立独行的 IE 给开发人员带来更多的麻烦。为了实现 Web 程序的跨浏览器和显示的一致性，我们不得不花费很多时间在各个浏览器差异的调试上。本文针对部分 IE 不支持的 CSS3 效果以及在 IE 浏览器上的替代方案做了详细的介绍。希望能为广大开发者在未来的开发工作中提供一点启示。