CSS3 PIE 让 IE6-8 支持部分 CSS3 新特性

发表日期：

CSS3 新增了不少实用功能，比如圆角、阴影、文字效果、渐变等，但比较纠结的是 IE6-8 还无法支持这些新特性，因为 IE 在国内还占据着相当大的市场份额，因此这个用 JS 编写的插件对国内开发人员来说是一个福音。本文将介绍 css3pie 的使用。

首先去官网下载 css3pie 插件，然后解压插件压缩包得到五个文件，其中有一个名字为 PIE.htc 的文件，这就是让 IE6-8 能够支持部分 CSS3 新特性的插件。将此文件上传至你站点所在的目录，文件路径可以自己设置。另外一个 PIE_uncompressed.htc 文件是未压缩的版本，如果懂得 JavaScript 的开发者还可以自行更改增强。PIE.php 文件是和 http 服务器设置问题导致无法使用 htc 的情况下才会用到，这时将 htc 文件和 PIE.php 文件放置在同一目录下，然后在具体的 CSS 条目下添加以下语句（具体用法参照下文）：

查看源代码

打印帮助

1#roundCorner{

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

3}

一般情况下不需要 PIE.php 文件，只需要 PIE.htc 文件即可。

PIE.htc 的使用方法：

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

查看源代码

打印帮助

1<divid="roundCorner"></div>

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

查看源代码

打印帮助

1#roundCorner{

2    height:100px;

3    width:60px;

4    border:1px solid #999;

5    -webkit-border-radius:10px;

6    -moz-border-radius:10px;

7    border-radius:10px;

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 特征，比如阴影、渐变等，具体信息请参考 官网 以及一些 CSS3 的用法参考。