让IE6/IE7/IE8浏览器支持CSS3属性 « 张鑫旭-鑫空间-鑫生活

让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属性，不需要化妆、修饰或是化身为变形金刚，这也是此方法的优点所在。

五、问题和必要的说明

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

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

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

参见下表：

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

七、实例与演示

我自己做了个demo页面，实现的效果是CSS3的圆角以及投影效果，您可以狠狠地点击这里：IE支持CSS3 demo

以下为IE6浏览器下的效果截图：

八、结语

此htc文件是老外写的，所以要是遇到不知名的问题，可以向我询问，但是我不能保证可以给出一个满意的答复。就这些，祝您好运。

原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址：http://www.zhangxinxu.com/wordpress/?p=783

（本篇完）

CSS "渐进增强"在web制作中常见应用举例 (0.648)
CSS3模拟window7炫酷界面效果展示 (0.585)
PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.509)
关于文字内容溢出用点点点(...)省略号表示 (0.415)
IE下实现类似CSS3 text-shadow文字阴影的几种方法 (0.380)
IE下css bug集合-翻译自haslayout.net (0.352)
区分IE8/IE7/IE6及其他浏览器-CSS "\9"hack (0.347)
CSS vertical-align的深入理解(二)之text-top篇 (0.347)
CSS 相对/绝对(relative/absolute)定位系列（三） (0.311)
CSS content内容生成技术以及应用 (0.304)
CSS渐变之CSS3 gradient在Firefox3.6下的使用 (RANDOM - 0.021)

分享到：开心网人人网豆瓣腾讯微博新浪微博

标签： border-radius, box-shadow, css3, IE, IE6, IE7, IE8, text-shadow, 兼容性, 浏览器

这篇文章发布于 2010年04月27日，星期二，16:56，归类于 css相关。阅读 19363 次, 今日 66 次

42 条评论发表在“让IE6/IE7/IE8浏览器支持CSS3属性”上

婴儿床尺寸说：

2010年04月28日于14:36

我也在学这个，但是我没有你学得深，只是学一点用来做wp的主题而已
River 说：

2010年04月29日于18:10

说实话，看到这个让我泪流满面，感激涕零啊，话说你都是在哪里看到这些资料的，羡慕啊
River 说：

2010年04月29日于18:19

刚才看了一下demo,ie6下没有效果啊？
张鑫旭说：

2010年04月29日于19:13

我刚看了下，没有问题。
yanzi 说：

2010年05月28日于17:42

怎么我照你教的方法使，达不到这种效果的？？
ijie 说：

2010年06月30日于08:16

不错哇，
太强大了。
如果能全部支持CSS3那就更强大了，
就好像google的HTML5.JS，就能实现支持HTML5
呵呵，
我去~ 说：

2010年09月4日于11:06

我去~你用ietester看看毛效果都没有
小默说：

2010年09月19日于11:22

每个类之后都要调用那个文件？
小默说：

2010年09月19日于13:24

还有一个疑问，这个htc文件的路径是相对与哪里的？html文件还是css文件？
peter 说：

2010年10月26日于09:33

我在IE6下测试的没有效果，在线等解答。Q:313191326
peter 说：

2010年10月27日于12:06

今天我又看了下，IE6下效果出来了，不过是加载完了后等了2秒钟才出来的。
不同人说：

2010年10月29日于14:35

需要配置些什么东西吗？我把你的demo和htc复制下来，ie下都没有效果，而且提示accese is denied to file(htc文件的路径+名称)，究竟是什么原因呢？直接在你博客上看demo没问题，弄下来就不行了
不同人说：

2010年10月29日于16:47

问题解决了，为何调用这个htc文件的页面一定要在站点下面，而且要使用相对路径呢？连使用站点路径都不行
张鑫旭说：

2010年10月29日于17:00

可能是安全性。
wls 说：

2010年12月16日于17:49

我和上边“不同人说“的情况一样但是我改了为什么还是没有效果呢！一定要在站点下面吗？我有新建站点啊！
微方传媒说：

2011年01月9日于02:01

IE6下实现效果有点慢～
藏山造纸笼说：

2011年02月21日于11:40

ie7没效果….
gmx 说：

2011年03月2日于15:15

这个东西曾经用过，还是会有很多不足的，路径必须放在站点根目录下，如果站内使用了定位的话，也会出现问题，查看源码的形式看的话，会出现很多垃圾代码
更多让ie支持CSS3属性的插件 | EIIE 说：

2011年03月7日于14:09

[...] 5. Nick Fetchak的 ie-css3.htc 关于此方法，我在前面的“让IE6/IE7/IE8浏览器支持CSS3属性”这篇文章中已经做过介绍。我是建议您看看这篇文章，倒不是ie-css3.htc这个玩意多么好，而是文中对htc文件以及VML预言做了些介绍，对于您了解IE下实现类似CSS3效果原理有所了解。 [...]
小凯说：

2011年03月8日于21:56

我弄了咋没效果我的QQ610028591麻烦加下QQ和你交流下
nicolashon 说：

2011年03月24日于15:18

为什么IE6,7都可以实现效果，而IE8不行呢？
大爷说：

2011年05月22日于11:59

这么多的新手啊，这个一定要在服务器环境测试才有效果。去你大爷
web前端寒风说：

2011年05月30日于17:30

这个确实很给力
bycal 说：

2011年06月21日于14:27

为什么你的demo在IE下面也不行呢？
网页错误详细信息

消息: 缺少对象
行: 18
字符: 1
代码: 0
URI: http://www.zhangxinxu.com/study/201004/ie6-ie7-ie8-support-css3.html
ie浏览器还是无法实现圆角说：

2011年06月28日于10:51

试用了可是还是不管用。请帮忙解决我打开你的例子在ie下也不是圆角
肖严说：

2011年07月19日于14:38

受教了
Adam 说：

2011年07月20日于00:43

这个例子需要上传到服务器后，才能够正常运行，你直接点击是看不到效果的。
毕业设计论文说：

2011年07月25日于18:57

支持了学习了
学者说：

2011年08月26日于10:45

我在ie下看，阴影有圆角效果，但是图片没有圆角效果，怎么回事？
新人说：

2011年08月30日于13:55

不兼容啊
yangyang 说：

2011年09月21日于11:41

哎。。不支持hover……background颜色不能随鼠标划过或者点击改变……头疼。。
博主有时间给我们分析一下淘宝商城首页焦点轮换图的那个圆圈是怎么实现的呗？貌似也是vml画出来的。。。
卡卡西说：

2011年10月12日于09:32

有圆角，我已经测试过了，ie6,7都行。还没有做超链接效果。
wandyLiang 说：

2011年12月5日于11:00

是圆角，为什么背景色是黑色的，而且改不了，怎么解决这个问题呀。
xie 说：

2011年12月6日于18:33

你的东西貌似有个BUG 大层如果做了圆角里面再做一个就不行了背景颜色不显示不知道什么问题求高手
cheng 说：

2011年12月7日于13:33

这个东西用啦，如果边框为10px左右，有个问题，就是边框外边是圆角，但边框内边是直角，不知道你有没遇到过？有啥好的方法解决吗？用两个div套？
cheng 说：

2011年12月7日于13:38

只有ie6里面显示正确的，郁闷！
朱宝祥说：

2011年12月12日于21:04

给力，成功了~
alvin 说：

2012年03月15日于12:24

已经按照你说的步骤做了，但是我想在IE下兼容CSS3的图片振动效果，效果不行，请问还需要设置什么吗？
pooh0x0 说：

2012年03月29日于14:11

引用这段js会对网站有什么弊端吗？例如耗时什么的？
张鑫旭说：

2012年03月29日于17:47

@pooh0×0 实际项目中不推荐使用，性能为原因之一。
ningyb 说：

2012年05月11日于10:19

我刚刚试了，在IE下，你这个htc文件有问题。建议用这个
http://bluehua.org/wp-content/uploads/2010/07/ie-css3.htc.zip
ningyb 说：

2012年05月11日于10:21

参考：http://bluehua.org/2010/07/04/1327.html