如何让IE7,8支持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、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。
下载地址:http://www.funet8.com/wp-content/files/iecss3.rar
解压后,打开test.html,如果显示效果是圆角,则可以继续。
使用演示:
.test {
width:560px;
height:400px;
background-color: blue;
padding:10px 8px 6px;
border: 2px solid #C0C0C0;
margin-bottom:10px;
border-radius: 10px;
behavior: url(ie-css3.htc);
}
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个值,为“上 右 下 左”。
原文链接:http://www.funet8.com/how-to-make-ie7-8-support-css3-rounded-approach.html
相关推荐
在早期的Internet Explorer浏览器,即IE6、IE7和IE8,它们并不支持CSS3的一些新特性,如圆角和阴影效果。这些特性在现代浏览器中已经非常常见,可以为网页设计提供更丰富的视觉体验。为了让这些老版本的IE浏览器也能...
虽然PIE.htc对于兼容旧版IE浏览器起到了重要作用,但它也有一定的局限性,例如性能问题、不支持动态改变样式以及对某些CSS3属性的支持不足等。随着浏览器的更新换代,现在大部分用户都已经升级到支持CSS3的浏览器,...
在标题"css3 支持ie8以下圆角"和描述"DIVCSS5圆角实例,CSS3版本圆角实例,支持低版本IE6-IE9浏览器"中,我们关注的关键知识点是CSS3的圆角边框以及如何在早期的Internet Explorer浏览器(IE6到IE9)中实现兼容性。...
在标题"ie6 7 支持css3 圆角"中,提到的问题是如何在这些老版本的IE浏览器中实现CSS3的圆角效果。 描述中提到的是一种解决方案,即使用插件来实现这一目标。这种插件通常是一个JavaScript或HTC(HTML组件)文件,...
总的来说,"iecss3.htc"是一个针对旧版IE浏览器实现CSS3圆角的兼容性解决方案,虽然现在其重要性已不如从前,但在处理老项目或照顾到仍然使用旧版IE的用户时,它仍是一个有价值的工具。然而,随着技术的进步,我们...
iecss3.htc css3圆角支持文件
我们都知道IE6,7并不支持CSS3的属性,IE8也不能很好的支持CSS3。但是有一个小脚本能够做到,它可以让IE支持 CSS3,包括:border-radius (rounded), box-shadow ( shadow), text-shadow等……
总结,要解决IE6、IE7、IE8对CSS3圆角的兼容性问题,可以采用如CSS3 PIE这样的JavaScript库,或使用图片背景和VML等替代方案。无论选择哪种方法,都需要进行充分的测试和优化,以确保在提供美观的视觉效果的同时,...
标题中的“ie-css3(让ie6 ie7 ue8支持css3).rar”指的是一个针对Internet Explorer(IE)浏览器的解决方案,尤其是版本6、7和8,这些版本不原生支持CSS3的新特性。这个压缩包包含了一个名为“ie-css3(让ie678支持css...
总结来说,`css3.htc`是一种为IE8实现CSS3圆角边框的技术,通过`behavior`属性将JavaScript代码注入浏览器,实现对非标准属性的支持。然而,由于其局限性和现代浏览器的广泛兼容性,这种技术在当前的开发实践中已...
2. 使用CSS3 PIE:CSS3 PIE(Progressive Internet Explorer)是一个JavaScript库,它通过VML(Vector Markup Language)扩展了IE的CSS渲染能力,使IE6到IE9能够支持一些CSS3特性,包括圆角和阴影。只需在页面头部...
对于不支持CSS3的IE浏览器(尤其是IE8及以下版本),我们可以使用jQuery库来模拟圆角效果。一种常见的方法是使用jQuery插件,如"jQuery.corner"或"jQuery.roundCorners"。这些插件通过动态创建额外的DOM元素和CSS...
为了让IE6、IE7、IE8支持CSS3,开发者通常会遵循以下步骤: 1. **引入PIE库**:首先,你需要在页面中引用PIE的JavaScript和HTC文件。这通常是通过在部分添加链接或者内联样式表来实现的。 2. **设置CSS3属性**:...
CSS3Pie是一个开源JavaScript库,通过VML(Vector Markup Language)技术,使IE6-IE8也能支持圆角效果。只需在HTML文件中引入PIE.js,然后在需要圆角的元素上添加`behavior: url(/path/to/PIE.htc)`,即可实现兼容。...
然而,早期版本的Internet Explorer(尤其是IE6、IE7和IE8)并不支持CSS3的一些高级特性,比如圆角。这就意味着在这些浏览器中,我们无法直接使用CSS来创建圆角效果。"DIV+CSS IE圆角"这个主题就是针对这个问题,...
在IE9及以上版本,`box-shadow`是被支持的,但在IE8及更低版本,需要使用滤镜(filter)来实现,例如: ```css .box { filter: progid:DXImageTransform.Microsoft.Shadow(color='#999', Direction=135, Strength=...
标题中的“让IE6, 7和8支持CSS3”指的是如何在老旧的Internet Explorer(IE)浏览器上实现对CSS3特性的兼容性支持。在IE6、7和8这些较旧版本中,它们并不完全支持现代的CSS3规范,这使得开发者在设计网页时面临诸多...
9. **CSS3属性兼容**:IE8及以下版本对CSS3新特性支持有限,如圆角、阴影、渐变等,需要借助于JavaScript库(如Modernizr)或渐进增强策略来实现。 10. **CSS Expression**:IE6和7支持CSS表达式,但这种动态计算...
标题中的“让IE6、7、8支持CSS3新特性插件”指的是针对早期版本的Internet Explorer(IE6、IE7、IE8)的一种解决方案,这些浏览器不原生支持CSS3的新特性。CSS3是层叠样式表的第三个主要版本,引入了许多增强网页...