让IE也支持圆角

转载自:http://cll.socss.cn/archives/259

css3的圆角属性,能为开发者提高开发的效率。可惜主流的ie6 7 8并不支持该属性。下面介绍一种让ie也支持圆角的方法。

1.首先要下载一个压缩包,里面有一个微软的脚本文件(11KB),里面是IE利用VML矢量可标记语言作为画笔绘出圆角。

下载地址:http://cll.socss.cn/wp-content/uploads/2011/07/iecss3.zip

使用方法:

.main{

border: 2px solid #C0C0C0;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

position:relative;

z-index:2;

behavior: url(此处为ie-css3.htc文件的绝对路径);

Webkit内核的浏览器支持“-webkit-border-radius:  10px;”属性(10px是圆角半径),可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius:  10px;”属性,也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 10px;”的属性。

 

需要注意以下几点:

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为  IE浏览器找该文件是相对当前html文件路径来找的。

2、一定要有定位属性:position:relative;

3、因为在IE浏览器下这些css3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。

4、如果在IE浏览器下某些模块无法用此渲染,可以试着绝对定位相应的层,即加上“ width: 400px; height:400px;”属性。

ps:因为该方法使用脚本来实现的,实际应用过程中可能会出现很多意想不到的问题,所以在正式商业项目中还是慎用的好。

 

我的使用经验:这个外部文件实际上就是一套js,会根据你的使用情况往页面上加一些代码来辅助实现你需要的效果。

这些代码主要是一个层,有行内样式,是根据你圆角对象相对屏幕的定位而产生的,那么就出现个问题~

如果你的对象的父级有position属性,但是又不在页面原点(0,0),就会产生错位问题,这个要注意一下。

当然你也可以自己去修改ie-css3.htc这个文件里面的js来达到你想要的效果。

 

发表回复