关注前端开发
关注用户体验

让IE浏览器支持CSS3圆角属性的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式。用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角:

1、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。

解压后,打开test.html,如果显示效果是圆角,则可以继续。

使用演示:

.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: 15px;”的属性。

注意事项

1、behavior的url里一定要填写ie-css3.htc的绝对路径,因为 IE浏览器找该文件是相对当前html文件路径来找的,所以对于Wordpress等动态程序生成的页面一定要填写绝对路径。

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

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

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

5、radius属性的10px是圆角半径,还可以给两个值如“border-radius: 10px 5px;”,这样则左上角与右下角半径为10px,右上角与左下角半径为5px。也可以赋4个值,为“上  右  下  左”。

赞(2)
未经允许不得转载:大前端 » 让IE浏览器支持CSS3圆角属性的方法
分享到: 更多 (0)

评论 15

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #12

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You obviously know what youre talking about, why throw away your intelligence on just posting videos to your site when you could be giving us something enlightening to read?

    Pasty Novo2周前 (03-11)回复
  2. #11

    322666666666666666262

    326吧hjbh2年前 (2017-02-20)回复
  3. #10

    有的成功,有点没有效果,找了半天都没有找到原因。

    eboy7年前 (2012-10-15)回复
  4. #9

    IE6、7不支持CSS3圆角倒还能理解,IE8竟然都不支持,这个。。。

    爱蝌蚪7年前 (2012-02-29)回复
  5. #8

    这个和css3pie有什么不同

    ftium47年前 (2011-12-10)回复
  6. #7

    图片的时候用不到 怎么办?

    TOYN7年前 (2011-12-07)回复
  7. #6

    不会用,怎么办……
    🙁

    鬼勼7年前 (2011-12-03)回复
  8. #5

    标准声明无效了

    changshuhong8年前 (2011-09-21)回复
  9. #4

    ie 不支持啊。郁闷死了。 😮 😮

    亲子8年前 (2011-08-24)回复
    • 对啊!

      来一个8年前 (2011-09-07)回复
  10. #3

    貌似在ie下不支持border-radius: 5px 5px 0 0,请求楼主支援~~

    山野菜菜籽8年前 (2011-08-09)回复
    • 楼主,支援下这个吧,,在IE下不支持border-radius: 5px 5px 0 0 有什么解决方法吗?

      hz7年前 (2012-02-16)回复
  11. #2

    貌似ie透明的也有个像这样的东东···· 😆

    heson8年前 (2011-03-29)回复
  12. #1

    想起来一直想说的是,当输入了评论之后,的效果很难看呀 – – 不知道是不是站长忘记更改了呢?

    seri8年前 (2011-02-16)回复
    • ok,十分感谢seri的提醒,确实是忘记更改留言那块的style了,晚上改掉

      浩子8年前 (2011-02-16)回复

themebetter 国内更好的WordPress主题服务商

立即前往