html圆角兼容jq,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个值，为“上右下左”。

html圆角兼容jq,IE兼容css3圆角的htc解决方法相关推荐

兼容所有浏览器的CSS3圆角效果
解决CSS3圆角兼容所有浏览器的方法.本文提到了一种很不错的实现跨浏览器圆角的解决方案. 前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的border-radius属性实现圆角HTML元 ...
wordpress php7 兼容_WordPress升级PHP7后wp-code-highlight插件兼容性解决方法
原创内容,转载请注明出处:https://www.myzhenai.com.cn/post/3479.html 关键词:WordPress内容空白升级PHP7后Wordpress内容空白 wp-co ...
让bootstrap兼容ie6 ie7 ie8 ie9 ie10 ie11的解决方法
前两天遇到要bootstrap兼容ie各个版本的问题,但是各种百度,各种博客,最后算是解决了,但是迷迷糊糊的,现在来总结一下,如有雷同纯属总结. 首先看看代码的模样: <html> < ...
vue 项目、vue-admin-ement项目在IE、360兼容模式下为空白界面（最新解决方法、亲测有效）
问题由于对element ui模板的一些配置文件进行删除,配置的js只留下vue.config.js剩余的都进行清除, 导致在IE以及360兼容模式下界面为空白思路控制台报的是SCRIPT100 ...
vs2015 python不兼容_vs2015安装失败缺少Python27_d.lib的解决方法
简介最近在调用caffe的python接口训练网络,需要进到caffe代码中调试,编译时需要用Python27_d.lib.Python27_d.dll. junparadox 2016年09月29日 ...
css文本框圆角不兼容,CSS教程之重置默认样式与IE兼容圆角的解决方法
CSS教程之重置默认样式与IE兼容圆角的解决方法 IE兼容css教程3圆角的htc解决方法现在css3的border-radius属性可以很方便的实现圆角功能,对网站前台人员无疑是一件喜事,但悲剧的 ...
CSS3 经典教程系列：CSS3 圆角（border-radius）详解
<CSS3 入门教程系列>前一篇文章详细介绍了 CSS3 RGBA 特性的用法,今天这篇文章我们在一起来看看 CSS3 中用于实现圆角效果的 border-radius 属性的具体用法. ...
css 渐变椭圆,CSS3圆角和渐变2种常用功能详解
Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: CSS3圆角的优点传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我 ...
彻底搞明白：CSS3圆角使用
引言 web开发中使用css对页面进行排版布局,CSS3是层叠样式表(Cascading StyleSheet)语言的最新版本,它的一大优点就是支持圆角.本文根据实际项目开发经验,对border-ra ...

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

html圆角兼容jq,IE兼容css3圆角的htc解决方法相关推荐

最新文章

热门文章