让IE6/IE7/IE8浏览器支持CSS3属性

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=783

一、下载

您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东。

二、上面的是什么东西

首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它。htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。Stop! 别叉远了,点到为止,如果您对htc文件感兴趣,可以参见这里

本文的这个ie-css3.htc文件看看名字,看看长相就知道是干嘛的了,让IE浏览器支持CSS3的一些属性。没错,就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为(比较流行的几种)。此htc第一段主要脚本如下:

function supportsVml() {
if (typeof supportsVml.supported == "undefined") {
var a = document.body.appendChild(document.createElement('div'));
a.innerHTML = '<v:shape id="vml_flag1" adj="1" />';
var b = a.firstChild;
b.style.behavior = "url(#default#VML)";
supportsVml.supported = b ? typeof b.adj == "object": true;
a.parentNode.removeChild(a);
}
return supportsVml.supported
}

明白人基本上都知道,这不跟js脚本一个模子里出来的嘛。也就是说,htc只是js脚本去韩国整了个容,换了副马甲而已。

三、如何工作的

要说工作原理,得有一个新角色粉墨登场,那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言,由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识,您可以点击这里:VML百科

如果要我说的话,我觉得就是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果。

四、如何使用

使用是很容易的,看下面的示例代码:

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}

可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。

五、问题和必要的说明

毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:

  1. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
  2. z-index值一定要比周围元素的要高,否则……只能说抱歉了~~

六、支持的样式及状态说明

参见下表:

样式 生效 无效
border-radius 为元素四个角设置圆角属性
元素边框
只设置一个角落的圆角属性
box-shadow 模糊大小参数
偏移值
不支持除了黑色(#000)以外的其他颜色
text-shadow 模糊大小参数
偏移值
颜色值
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详

ie支持CSS3标签的更多相关文章

  1. HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)

    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...

  2. Respond.js – 让 IE6-8 支持 CSS3 Media Query

    Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...

  3. css3部分属性兼容性别扭写法(因为很多我就叫他别扭了,希望全面早早支持css3吧)

    /*圆角class,需要设置圆角的元素加上class名称*/ .roundedCorners{ -webkit-border-radius: 10px;/*webkit内核浏览器*/ -moz-bor ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. 让IE6/IE7/IE8支持HTML5标签的js代码

    让IE(ie6/ie7/ie8)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个j ...

  6. 让不支持h5新标签的浏览器支持新标签

    把这段js加到页面的头部就可以了,创建想让浏览器支持的标签即可 //条件判断是否支持 h5 if(window.applicationCache){ alert("支持h5") } ...

  7. 让IE6/IE7/IE8浏览器支持CSS3属性

    让IE6/IE7/IE8浏览器支持CSS3属性 一.下载 您可以狠狠地点击这里:ie-css3.htc,这个玩意儿是让IE浏览器支持CSS3表现的关键东东. 二.上面的是什么东西 首先说说.htc文件 ...

  8. IE10开始支持CSS3 Transitions, Transforms 和 Animations

    这是一个好消息,微软公开说明IE10预览版已经支持CSS3属性 Transitions, Transforms 和 Animations,你可以直接写transitions,而不是加个恶心的前缀-ms ...

  9. php 内置支持的标签和属性

    内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,ty ...

随机推荐

  1. ios开发——实用技术篇Swift篇&视频

    视频 // MARK: - 播放视频 /*----- 播放视频 ------*/ func moviePlayerPreloadFinish(notification:NSNotification) ...

  2. SSAS 实例重命名

            在某些时候我们可能想对现有的SSAS实例进行重命名之类的,比如:我以前有两个SSAS,一个2005,一个2008R2,其中我们2005是一开始安装的,并且是默认实例,2008R2是命名 ...

  3. 主流Jquery弹出框优缺点对比

    一:BoxXy 缺点:动态加载隐藏的内容层时,是复制操作,而不是引用原内容层,这样会出现两个一样的内容层,影响id,class的jquery操作 二:artdialog

  4. akw、grep、sed常用命令

    awk 求和 cat data|awk '{sum+=$1} END {print "Sum = ", sum}' 平均值 cat data|awk '{sum+=$1} END ...

  5. poj 2186 强连通分支 和 spfa

    思路: 建图时,分别建正向图edge和转置图T.用正向图edge来DFS,找出第一个被发现的强连通分支(如果该图存在题目要求的点,那么一定就是第一个被发现的).然后用spfa跑转置图T,判断被发现的点 ...

  6. 转:基于Webrtc的跨平台实时语音通信解决方案(讲座)

    转:http://edu.csdn.net/course/detail/320/

  7. Apache ab 测试工具使用(一)

    简述: 试用apache ab测试工具 下载点 http://httpd.apache.org/download.cgi 参考: http://jingyan.baidu.com/article/e3 ...

  8. [Jquery] 获取地址栏参数的方法 备忘

    <script type="text/javascript"> (function ($) { $.getUrlParam = function (name) { va ...

  9. JAVA之经典Student问题1

    通过“三目运算符”求最大值与最小值. class student { //定义学生编号 private String stu; //学生姓名 private String name; //学生书信成绩 ...

  10. Agile.Net 组件式开发平台 - 服务器端部署

    应用服务器: 操作系统要求推荐Windows Server 2008,服务器硬件如果支持64位建议安装64位操作系统产品以最大化发挥服务器性能. 安装操作系统Windows Server 2008,其 ...