IE兼容css3圆角的实现代码


Posted in HTML / CSS onJuly 21, 2011

让我们弃新技术不用,是不可能的,因此找到了一种解决的办法--- 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 / CSS 相关文章推荐
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
超酷炫 CSS3垂直手风琴菜单
Jun 28 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 HTML / CSS
使用HTML5中的contentEditable来将多行文本自动增高
Mar 01 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
基于CSS3画一个iPhone
Apr 21 HTML / CSS
10个很棒的 CSS3 开发工具 推荐
May 16 #HTML / CSS
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 #HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 #HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 #HTML / CSS
css3 background属性调整增强介绍
Dec 18 #HTML / CSS
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 #HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 #HTML / CSS
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP删除非空目录的函数代码小结
2013/02/28 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP系统命令函数使用分析
2013/07/05 PHP
浅析php原型模式
2014/11/25 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总
2013/07/08 Javascript
table行随鼠标移动变色示例
2014/05/07 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
2014/11/10 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
vuex实现购物车功能
2020/06/28 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
Python字符串详细介绍
2015/05/09 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
python实现计算器功能
2019/10/31 Python
关于python的缩进规则的知识点详解
2020/06/22 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
酒吧总经理岗位职责
2013/12/10 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
团干部培训班心得体会
2016/01/06 职场文书
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android