使用CSS3 PIE让IE6-8正确的显示圆角

很多项目开发中会兼容IE6-8,但是IE6-8不支持CSS3这使得很多漂亮的圆角效果实现起来非常的麻烦,本篇教程中将介绍如何使用CSS3 PIE让IE6-8正确的显示圆角。

CSS3 PIE

要想在老版本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的相对位置。

css3pie path

 

 

  1. #myCSS3Element
  2. {
  3.     border: 1px solid #999;
  4.     -webkit-border-radius: 10px;/*webkit内核, Chrome*/
  5.     -moz-border-radius: 10px;/*mozilla内核 Firefox*/
  6.     border-radius: 10px;/*IE*/
  7.  
  8.     /*一定不要忘记behavior属性*/
  9.     behavior: url(PIE-1.0.0/PIE.htc);
  10. }

了解了如何使用CSS3 PIE让IE6-8支持更多的css3属性,请点击此处查看。



发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>