让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个值,为“上  右  下  左”。

让IE浏览器支持CSS3圆角属性的方法,布布扣,bubuko.com

时间: 2024-11-14 22:25:09

让IE浏览器支持CSS3圆角属性的方法的相关文章

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

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

让IE6/IE7/IE8浏览器支持CSS3属性

让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它.htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控

CSS3 圆角属性 border-radius

在 CSS3 中新增了一个 border-radius 边框半径属性,即大家常用的圆角效果.这使得制作圆角将不再麻烦,只需对所用对象加一个 border-radius 属性即可,不必使用图片定位或冗余代码完成了.不过它的使用瓶颈目前也是显而易见的,因为效果显示需支持 CSS3 的现代浏览器,而在一些老版本浏览器上则无法显示,如IE8及以下浏览器就不行. CSS3 圆角属性 border-radius 使用方法: 同时设置四个圆角只需给出一个值即可:border-radius: 10px; 也可以

border-radius 样式表CSS3圆角属性

border-radius 是CSS3圆角属性,用来实现DIV层的4个边框画成圆角. 一.语法: border-radius : none | <length>{1,4} [/ <length>{1,4} ] 如:border-radius:5px 5px 5px 5px; 二.取值: <length>: 由浮点数字和单位标识符组成的长度值.不可为负值. 三.说明: border- radius是一种缩写方法.如果"/"前后的值都存在,那么"

兼容所有浏览器的CSS3圆角

兼容所有浏览器的CSS3圆角     解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待. 译 :前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元素的问题.你或许知道CSS3的border-radius 属性被Safari.Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它. 那么要想在IE中实现圆角,你

让IE支持CSS3圆角的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式. 本文我们主要是讲解如果用CSS 3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS 3的解析,只有还不太主流的IE 9支持CSS 3和HTML 5的标准.让IE支持CSS 3的解析方法有很多种,下面介绍一种实用的让IE支持CSS 3解析的方法——IE利用VML矢量可标记语言作为画笔绘出圆角: 1.下载一个压缩包,里面有

PIE使IE支持CSS3圆角盒阴影与渐变渲染

PIE使IE支持CSS3圆角盒阴影与渐变渲染 http://css3pie.com/download/

让ie浏览器支持html5标签的实现方法

Html5已经风靡很久了,不研究html5+css3实在有些过不去,今天先从最基本的开始介绍吧,让ie家族老前辈能够认识html5的新标签.前端资源分享 1.页面中加入代码 .代码   <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 2.定义一下CSS代码(Important)

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角