1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

让IE支持CSS 3圆角属性的方法

作者:用户 来源:互联网 时间:2016-03-03 12:36:40

文件浏览器圆角属性效果支持脚本动态生成VML控件设置圆角

让IE支持CSS 3圆角属性的方法 - 摘要: 本文讲的是让IE支持CSS 3圆角属性的方法, 如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式。用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式。 推荐专题

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式。用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式。

推荐专题: Web标准化——跨浏览器开发教程本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准。让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角:

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

下载地址:http://www.iefans.net/wp-content/uploads/2010/12/iecss3.rar

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

使用演示:


  1. .main{  

  2. border: 2px solid #C0C0C0;  

  3. -moz-border-radius: 10px;  

  4. -webkit-border-radius: 10px;  

  5. border-radius: 10px;  

  6. position:relative;  

  7. z-index:2;  

  8. 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浏览器下这些CSS 3效果的实现是要借助于VML,由VML绘制圆角或是投影效果,所以还需要一个z-index属性。z-index属性最好设置得比较大,如2。

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

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

【编辑推荐】



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索文件 , 浏览器 , 圆角 , 属性 , 效果 , 支持 , 脚本动态生成VML 控件设置圆角 ie8不支持的css属性、css3圆角兼容ie8、css圆角兼容ie、ie8 css 圆角、ie8 圆角 纯css,以便于您获取更多的相关知识。

html5-圆角和阴影效果,应该使用图片吗

... 圆角和阴影效果, css3已经支持了 传统的做法,就是用图片 现在的书上,还有在教用图片这种老办法 现在,我们应该在哪种场景下使用css3的功能,哪种情况下使用图片实现呢? ...

IE兼容css3圆角的htc解决方法

...对网站前台人员无疑是一件喜事,但悲剧的是IE6/7/8并不支持,让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角: 下载一个压缩包ie-css3.htc,里面有一个微软的脚本文...

border-radius 兼容ie

...要高,否则……只能说抱歉了~~ 4.附加一条连接:让ie6/7/8支持CSS3的8种方法a,http://www.weeeb.net/c838.htmlb,http://blog.csdn.net/clh604/a... 内容来源:https://segmentfault.com/a/1190000006592301

js在IE与firefox的差异集锦

1.firefox不能对innerText支持。firefox支持innerHTML但却不支持innerText,它支持textContent来实现innerText,不过默认把多余的空格也保留了。如果不用textContent,如果字符串里面不包含HTML代码也可以用innerHTML代替。 2.禁止选取网页内容:在...

最佳圆角与IE6 png透明Javascript解决方案

...画像素的方式绘制圆角:复杂,圆角不平滑,不能很好的支持圆角内的背景,通杀所有浏览器(本博客的圆角暂时还是这个原理) ◆使用支持圆角的浏览器私有属性定义圆角:简单,圆角平滑,浏览器支持有限 二、解决IE6下对p...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备