很多项目开发中会兼容IE6-8,但是IE6-8不支持CSS3这使得很多漂亮的圆角效果实现起来非常的麻烦,本篇教程中将介绍如何使用CSS3 PIE让IE6-8正确的显示圆角。
要想在老版本IE中正确的显示CSS3属性,我们需要借助一些额外的工具,天屹觉得其中最好用的就是CSS3 PIE了。接下来就通过CSS3 PIE提供的方法来实现在老版本IE浏览器中显示CSS3属性。
CSS3 PIE支持在老版本IE中使用下面的CSS3属性:
border-radius, box-shadow, border-image, gradients, RGBA color还有一些CSS3 PIE自定义的属性,本篇文章主要介绍一下border-radius
如何使用CSS3 PIE
首先你需要下载CSS3 PIE,点此下载。然后解压到你的网站目录下面,具体的目录位置你可以随意放置。现在你就可以在项目中使用上面的CSS3属性了。
在使用了CSS3属性之后你需要加上下面的这段代码,通知CSS3 PIE帮助我们在老版本IE中正确的显示CSS3属性:
behavior: url(path/PIE.htc);
上面值得注意的是,url里面的路径不是相对于css文件的路径,而是相对于使用这个CSS类的网页的路径。和background-image中url的路径是不一样的,这一点特别重要,否则CSS3 PIE将不能正确的工作。
最后我们来看看IE6-8正确显示圆角的实现,在css文件夹中的style.css里定义了#myCSS3Element
类,test.html中包含id为myCSS3Element
的div,htc文件在PIE-1.0.0文件夹根目录下面。所以behavior的url是根据test.html和PIE.htc的相对位置来指定的,而不是style.css文件和PIC.htc的相对位置。
- #myCSS3Element
- {
- border: 1px solid #999;
- -webkit-border-radius: 10px;/*webkit内核, Chrome*/
- -moz-border-radius: 10px;/*mozilla内核 Firefox*/
- border-radius: 10px;/*IE*/
- /*一定不要忘记behavior属性*/
- behavior: url(PIE-1.0.0/PIE.htc);
- }
了解了如何使用CSS3 PIE让IE6-8支持更多的css3属性,请点击此处查看。