让IE6/IE7/IE8支持CSS3的插件-CSS3PIE

 

在前面的文章中，介绍了使IE支持HTML5的插件《HTML5网页如何让所有的浏览器都能识别HTML5标签样式》。而CSS3 新增了不少实用功能，比如圆角、阴影、文字效果、渐变等，但IE6-8 还无法支持这些新特性，因为IE 在国内还占据着相当大的市场份额，因此这个用 JS 编写的插件对国内开发人员来说是一个福音。本文将介绍 css3pie 的使用,点击上面的图片链接到官方网站。

官网的首页有一个DEMO，可以通过设置是否支持CSS3新特性看到直接的结果。如果你想使用该插件，请按照如下步骤：

第一步在官网下载 css3pie 插件，然后解压插件压缩包得到五个文件，其中有一个名字为 PIE.htc 的文件，这就是让 IE6-8 能够支持部分 CSS3 新特性的插件。

第二步将此文件上传至你站点所在的目录，文件路径可以自己设置。另外一个 PIE_uncompressed.htc 文件是未压缩的版本，如果懂得 JavaScript 的开发者还可以自行更改增强。PIE.php 文件是和 http 服务器设置问题导致无法使用 htc 的情况下才会用到，这时将 htc 文件和 PIE.php 文件放置在同一目录下，一般情况下不需要 PIE.php 文件，只需要 PIE.htc 文件即可。

第三步在具体的 CSS 条目下添加以下语句（具体用法参照下文）：

#myElement {
    ...
    behavior: url(PIE.htc);
}

例如

1	#boxroundCorner{

2	behavior: url(path/to/PIE.htc);

3

}

PIE.htc 的使用方法：

假设你已经创建了一个 html 文件，要对其中某个元素创建圆角效果，HTML Code：

 

< div id = "boxroundCorner" ></ div >

在 CSS 文件中添加如下语句，CSS Code：

1	#boxroundCorner{

2	height: 100px;

3	width: 60px;

4	border: 1px solid #999;

5	-webkit-border-radius: 12px;

6	-moz-border-radius: 12px;

7	border-radius: 12px;

8	behavior: url(path/to/PIE.htc);

9

}

上面的代码中，-webkit-border-radius 是用来兼容 Safari 和 Chrome 浏览器，-moz-border-radius 是用来支持 Firefox 浏览器。样式代码中的 behavior:url(path/to/PIE.htc); 是导入的 PIE 插件，该插件的路径应该是之前上传到服务器时所放置的路径。

这样，在 IE6-8 浏览，就能够正确显示 CSS3 的圆角了，这个 PIE 还可以支持其他一些优秀的 CSS3 特征，比如阴影、渐变等，具体包括：

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

总结：是不是很强大？虽然不能支持全部CSS3特性，但几个比较有意思的UI内容还是能够得到很好支持，对于国内开发者而言，也不啻为一个过渡期的解决方案！大家继续为停止苦逼的IE6奋斗吧！鼓起勇气干脆不支持！