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

这篇文章发布于 2010年04月27日,星期二,16:56,归类于 CSS相关。 阅读 510307 次, 今日 27 次 123 条评论

 

一、下载

您可以狠狠地点击这里: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效果。

IE VML画笔 张鑫旭-鑫空间-鑫生活

四、如何使用

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

.box {
  /* 现代浏览器以及使用了IE-CSS3的IE浏览器 */
  border-radius: 15px; 
  /* 现代浏览器以及使用了IE-CSS3的IE浏览器 */
  box-shadow: 10px 10px 20px #000; 
  /* 通知IE浏览器调用脚本作用于'box'类 */
  behavior: url(ie-css3.htc); 
}

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

五、问题和必要的说明

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

  1. 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
  2. z-index值一定要比周围元素的要高,否则……只能说抱歉了~~
  3. http协议访问。
  4. 原生IE浏览器访问,兼容模式显示可能没效果。

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

参见下表:

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

七、实例与演示

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

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

IE支持CSS3属性demo 张鑫旭-鑫空间-鑫生活

八、结语

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

如果本文解决方案你用得不顺利,试试譬如cssSandpaper这个解决方案

(本篇完)

分享到:


发表评论(目前123 条评论)

  1. 你的缺陷指正说道:

    PIE插件

  2. 7喜6茶说道:

    但是按照楼主的意思,代码复制下来,放到服务器上,但是IE还是不起效啊……

  3. keenwon说道:

    是否支持background-size

  4. TextShadow可以支持吗说道:

    TextShadow好像不支持啊

  5. 咨询说道:

    behavior: url(ie-css3.htc) 是不是加了这个,ie就只能支持border-radius,box-shadow,text-shadow这三个属性

  6. xuan说道:

    本地测试可以(htc文件和html同在一个文件夹)但是在本地搭建的apach服务器环境下就不行了。请问什么原因。

  7. 安峰鑫说道:

    不能直接给img标签加吗,div好使了,但是img不好使..

  8. garfield说道:

    这个在IE下好像显示很不好哇~

  9. struggle说道:

    本地测试了下效果,好像不怎么样,看下这个吧,没有什么问题和局限性,地址是:http://www.webfishes.com/common/ie-css3.htc

  10. skyy说道:

    本地测试可以(htc文件和html同在一个文件夹)但是在本地搭建的apach服务器环境下就不行了。请问什么原因。

  11. ucatch说道:

    遇到个问题,如果在一个设置有background-color属于的层上给某个图片设置圆角,IE8上直接不显示这个图片了
    楼主有办法解决吗?

  12. xiaoyan说道:

    楼主确实很厉害,每天都来你网站逛逛,嘿嘿,学到很多新东西,并且楼主每次阐述东西的语言诙谐幽默,思维清晰明了,很容易理解

  13. ningyb说道:

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

  14. ningyb说道:

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

  15. pooh0x0说道:

    引用这段js会对网站有什么弊端吗?例如耗时什么的?

  16. alvin说道:

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

  17. 朱宝祥说道:

    给力,成功了~

  18. cheng说道:

    只有ie6里面显示正确的,郁闷!

  19. cheng说道:

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

  20. xie说道:

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

  21. wandyLiang说道:

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

  22. 卡卡西说道:

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

  23. yangyang说道:

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

  24. 新人说道:

    不兼容啊

  25. 学者说道:

    我在ie下看,阴影有圆角效果,但是图片没有圆角效果,怎么回事?

  26. 支持了 学习了

  27. Adam说道:

    这个例子需要上传到服务器后,才能够正常运行,你直接点击是看不到效果的。

  28. 肖严说道:

    受教了

  29. ie浏览器还是无法实现圆角说道:

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

  30. bycal说道:

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

    消息: 缺少对象
    行: 18
    字符: 1
    代码: 0
    URI: http://www.zhangxinxu.com/study/201004/ie6-ie7-ie8-support-css3.html

  31. web前端寒风说道:

    这个确实很给力

  32. 大爷说道:

    这么多的新手啊,这个一定要在服务器环境测试才有效果。去你大爷

  33. nicolashon说道:

    为什么IE6,7都可以实现效果,而IE8不行呢?

  34. 小凯说道:

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

  35. gmx说道:

    这个东西曾经用过,还是会有很多不足的,路径必须放在站点根目录下,如果站内使用了定位的话,也会出现问题,查看源码的形式看的话,会出现很多垃圾代码

  36. 藏山造纸笼说道:

    ie7没效果….

  37. 微方传媒说道:

    IE6下实现效果有点慢~

  38. wls说道:

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

  39. 不同人说道:

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

  40. 不同人说道:

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

  41. peter说道:

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

  42. peter说道:

    我在IE6下测试的没有效果,在线等解答。Q:313191326

  43. 小默说道:

    还有一个疑问,这个htc文件的路径是相对与哪里的?html文件还是css文件?

  44. 小默说道:

    每个类之后都要调用那个文件?

  45. 我去~说道:

    我去~你用ietester看看 毛效果都没有

  46. ijie说道:

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

  47. yanzi说道:

    怎么我照你教的方法使,达不到这种效果的??

  48. River说道:

    刚才看了一下demo,ie6下没有效果啊?

  49. River说道:

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

  50. 婴儿床尺寸说道:

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