转载自: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来达到你想要的效果。