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

现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的是IE6/7/8并不支持,让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- IE利用VML矢量可标记语言作为画笔绘出圆角:

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

 使用演示:

.main{
border: 2px solid #C0C0C0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
z-index:100;
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个值,为“上  右  下  左”。

 

时间: 2024-08-01 22:46:39

IE兼容css3圆角的htc解决方法的相关文章

JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)_javascript技巧

IE中new Date(strDate)返回无效时间解决方式: 方法一: function getDateForStringDate(strDate){ //切割年月日与时分秒称为数组 var s = strDate.split(" "); var s1 = s[0].split("-"); var s2 = s[1].split(":"); if(s2.length==2){ s2.push("00"); } return

css兼容调试常见情况及解决方法

css兼容调试常见情况及相应方法,阅读css兼容调试常见情况及相应方法,一.CSS HACK以下两种方法几乎能解决现今所有HACK.1, !important随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该

Word 2013新建文档显示“兼容模式”的解决方法

如果用户在Office2007或Office2010的 基础上升级安装了Office2013,并且曾经在Word2007或Word2010中设置默认的Word文档保存格式为Word2003文档格式(.doc),则在Word2013中新建文档时将默认创建"兼容模式"Word文档.即使用户将Word2013的默认保存格式设置为.docx格式也无法解决问题. 在这种情况下,用户可以尝试删除Word2013默认模板文件来解决.以在Windows8系统中删除模板文件为例,操作步骤如下所述: 第1

Win8/Win8.1系统常见错误代码解决方法汇总

Win8/Win8.1系统常见错误代码解决方法汇总 1.宽带连接提示错误651 情况:网卡以及驱动均正常,在ADSL第一次拨号时会遇到"错误651"的提示,第二次拨号才能成功连接上. 可能原因:本地服务中的相关服务未开启或者Windows8与现有部分Modern兼容导致. 解决方法:Win键+R键启动[运行],输入"services.msc"然后点击确定,进入服务查看[Windows服务]Telephony;Remote Access Connection Mana

Win8更新到Win8.1的错误的原因级解决方法

最近有不少朋友在从Win8升级到Wind8.1的时候遇到"无法更新到windows8.1"错误提示,导致升级失败.如果你也遇到这种,情况,那么不妨看看以下的排查方法吧. 抱歉,我们无法更新到Windows 8.1.我们已经将这台电脑还原为以前版本的Windows 0xc1900101-0x40017" 错误提示:"无法更新到Win8.1 错误提示:"无法更新到Win8.1 可能引起的原因: 1. 杀毒软件(建议关闭或者先卸载) 2. 有问题的驱动 3. 某

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

让IE浏览器支持CSS3圆角,在IE浏览器中实现圆角的效果,一般我们会采用圆角图片的方式来实现.那我们可以通过CSS3样式来实现网页圆角效果吗?        下面我们就来介绍一些在IE浏览器中通过CSS3实现圆角的方法,如何用CSS3样式表来实现圆角效果.要注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有在IE9才能支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多,下面介绍一种实用的让IE支持CSS3解析的方法:IE利用VML矢量可标记语言作为画笔绘出

报错-我在使用PIE.htc使IE6兼容css3特效时出现object expected错误 具体如下

问题描述 我在使用PIE.htc使IE6兼容css3特效时出现object expected错误 具体如下 错误信息:An Error Has Occurred in the Script on This Pageline:13char:1error:object expectedcode:0 1-20行代码如下 `<!doctype html> 首页 <!--[if lt IE 10]><![endif]--><br>$(function() {<b

IE浏览器中CSS3圆角和阴影方法

border-radius属性 CSS3圆角只需设置一个属性:border-radius(含义是"边框半径").你为这个属性提供一个值,就能同时设置四个圆角的半径.所有合法的CSS度量值都可以使用:em.ex.pt.px.百分比等等. 比如,下面是一个div方框: 现在设置它的圆角半径为15px: border-radius: 15px; 这条语句同时将每个圆角的"水平半径"(horizontal radius)和"垂直半径"(vertical

最全的CSS浏览器兼容常见问题和解决方法

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了 IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容