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 media queries + jQuery实现响应式导航
Sep 30 HTML / CSS
彻底弄明白CSS3的Media Queries(跨平台设计)
Jul 27 HTML / CSS
CSS3 Media Queries详细介绍和使用实例
May 08 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
一款html5 canvas实现的图片玻璃碎片特效
Sep 11 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
May 12 HTML / CSS
html5简介及新增功能介绍
May 18 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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 Pear 安装及使用
2009/03/19 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
Linux安装配置php环境的方法
2016/01/14 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
js实现仿Discuz文本框弹出层效果
2015/08/13 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
原生js实现简单轮播图
2020/10/26 Javascript
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
汇源肾宝广告词
2014/03/20 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
求职自我推荐信
2015/03/24 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
刑事附带民事代理词
2015/05/25 职场文书
尊师重教主题班会
2015/08/14 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
创业开店,这样方式更合理
2019/08/26 职场文书
Java 多态分析
2022/04/26 Java/Android
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js