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

这篇文章发布于 2010年04月27日,星期二,16:56,归类于 CSS相关。 阅读 510043 次, 今日 6 次 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. 小龙虾说道:

    服务器环境下无效,本地打开ok
    .box {
    position:relative;
    width:360px;
    height:200px;
    background-color:pink;
    -moz-border-radius: 15px; /* Firefox */
    -webkit-border-radius: 15px; /* Safari 和 Chrome http://www.manongjc.com/article/1214.html */
    border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
    behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于’box’类 */
    }

  2. behavior: url(ie-css3.htc);说道:

    这个属性行不通是怎么回事?

  3. maomao说道:

    .header .search-hd input {
    width: 258px;
    height: 32px;
    outline: none;
    border: none;
    background-color: #eff3f5;
    color: #b4b4b4;
    /* border-radius: 16px; */
    -moz-border-radius: 16px; /* Firefox*/
    -webkit-border-radius: 16px; /*Safari 和 Chrome*/
    border-radius: 16px; /*Opera 10.5+, 以及使用了IE-CSS3的IE浏览器*/
    behavior: url(../ie-css3.htc); /*通知IE浏览器调用脚本作用于’box’类 */
    position: relative;
    padding-left: 20px;
    z-index:2;
    font-size: 14px;
    }

  4. gyx说道:

    完全不能用啊,神马情况

  5. nick说道:

    要使用这个文件去哪里下载引入啊,引入了这个文件就可以支持background-size,min-width,这些新属性了吗?

  6. 小姐姐说道:

    在IE8里面无效,贴上代码:

    无标题文档

    body,html{ padding:0; margin:0;}
    .box{ height:200px; width:200px; background:#F60; margin:50px auto;
    -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’类 */
    }

    哈哈

  7. 打的费说道:

    就是在IE的低版本下的css3属性太假了

  8. 比你老的菜鸟css开发说道:

    那是不是说,有了prefixfree就没这个htc什么事儿了?

  9. 孙康说道:

    请问这个文件怎么引入页面啊?用link标签?

  10. dalin说道:

    ie8根本就不行,还说兼容

  11. 疑问说道:

    你好关于您给的宝贵意见,我经过测试发现有一个问题,就是为了让浏览器识别css3的属性,但是有一个属性box-shadow这个属性还想只能设置一个单方向(从左向右,从上到下得到方向)另外不能设置一些其他的颜色值,这一点不是太美好

  12. 小小程序员说道:

    试了下,ie8可以使用完美实现border-radius,但是ie7下这毛边是不是太大了一点..看到有些人评论说ie9会有问题,这肯定有问题呀,毕竟ie9都可以识别behavior和border-radius,要对ie9进行单独的hack才行。而有些人说没办法作用,我猜想要么没加z-index,relative,或者是behavior的地址写错了,毕竟不能直接复制站长的代码 behavior: url(ie-css3.htc);这个behavior的地址写的是相对地址,像我写的就是behavior: url(“/Content/Css/ie-css3.htc”);

  13. 我是欣欣酱说道:

    为什么我按照这个方法试了还是不行嘞~
    .user .username{
    background-color: #ecf5fa;
    width: 300px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #bac7d2;
    -moz-border-radius:0px 5px 5px 0px;
    -webkit-border-radius:0px 5px 5px 0px;
    border-radius:0px 5px 5px 0px;
    outline:medium;
    padding-left: 10px;
    position: relative;
    z-index:100;
    behavior: url(../js/PIE.htc);
    }

  14. 皮皮虾说道:

    为什么不支持旋转属性 transform:rotate(45deg)

  15. joson说道:

    你这个dome 好像在ie 8 的浏览器下看不到效果 。

  16. 结果就是说道:

    不好使

  17. 111说道:

    不行

  18. 随风奔跑说道:

    ie-css3.htc只能支持border-radius、box-shadow、text-shadow。并且必须定位和z-index值大于周围元素。局限性很大,有更好的方法吗。
    重点是我想问。在ie8里怎么兼容rgba。在网上找到一些方法 利用filter值。可是使用filter值后,元素可以透明,但是子元素溢出部分不能显示。有更好的解决办法吗?

  19. EchoChien说道:

    貌似在IE9上回报错

  20. x说道:

    不能兼容,就不要写出来了,好 么,浪费我的时间!!!!!!以后瞪大眼睛在发表

  21. 司马老贼说道:

    并不能支持IE8啊我试了,并不能支持。

  22. 背景图片重复说道:

    使用后效果到是有了 但如何解决背景图片重复的问题

  23. 陈小盖说道:

    以前在公司项目上试过,但是没有效果,今天再次试了试,加载了几分钟才实现效果。效果是实现了,但是也因此拖慢了响应速度。。。。(┬_┬)

  24. 刺客说道:

    看了鑫哥的这么多文章,今天才知道这张图片是张含韵!

  25. Wanan说道:

    ie8下圆角不生效【http://www.zhangxinxu.com/study/201004/ie6-ie7-ie8-support-css3.html】

  26. ie8依然不管用说道:

    ie8下没效果

  27. Wanan说道:

    站长的方法虽好,但好像不能适合所有的CSS3样式。

  28. 阿蕾说道:

    试用了,没效果。

  29. 匆匆说道:

    只能用到背景或者边框才可以吗,图片是不是不可以

  30. 魏紫说道:

    ie9下报错,怎么回事啊,求大神指导啊
    SCRIPT5007: 无法获取未定义或 null 引用的属性“push”
    文件: ie-css3.htc,行: 150,列: 2

  31. 张娇说道:

    我试了下,IE5可以,但是IE6、7、8都不行

  32. 南宫丿睿说道:

    赞,border-radius属性必须搭配bacnground属性。
    behavior: url(ie-css3.htc); background: #FFFFFF;
    这个默认背景是黑色(#000000)的,不过确实给力。
    然而这个还有一个缺陷,button或者input[type=”button”],input[type=”submit”]的时候,就不能用这个,只能用作于div和部分display:block;的元素。上面说的按钮,display:block;就不行。
    可能是老外人呗按钮应该用background:url();来解决的吧。

  33. Mr_duan说道:

    ie8 下面的 transform:rotate();属性难道不支持吗?

  34. 向阳花开说道:

    张老师,我在本地测试的时候,在引用ie-css3.htc的情况下,背景图片尺寸小于div的尺寸时,在ie9以下背景图片会repeat。打扰老师了,谢谢~

    • 2513251574说道:

      在引用ie-css3.htc的情况下,背景图片尺寸小于div的尺寸时,在ie9以下背景图片会repeat。我也遇到这个问题了,还没解决,

  35. 大头学前端说道:

    老师,我试了这个方法,还有PIE的方法,在IE7 8下都没有实现圆角和阴影功能啊,还有我把你的这两个demo都拿到IE 7 8下试了,也是没有圆角的。。。。。。。

  36. deanwen说道:

    那么其他的css3属性能不能支持呢,比如说translate、动画啊什么的?!

  37. 玖头说道:

    以前用过这个方法,记得是可以的,但是现在是不是不支持了呢,楼主的链接在ie7,8下没有效果,资源有限,请楼主检查更新。

  38. yopapa说道:

    我如此复制在根目录下,代码里也引用了htc文件,但在ie8下没有变化。
    另外,如何让ie8支持css3里的@media?急求办法

  39. 木的树说道:

    楼主我怎么发现box-shadow只支持黑色

  40. rebaomi说道:

    想问一下对于:before和:after两个伪类貌似不支持呢

  41. 夜来香说道:

    该插件,只要定义标签的任何一个上级定义了背景,在IE8下直接OVER..

  42. kaikai说道:

    呵呵,IE10里不用加那个也可以正常显示的, 你这个对于圆角没用啊?

  43. orange说道:

    那请问楼主要把 ie-css3.htc 这个文件放在与CSS一起的文件夹吗?
    我这边不好用啊~~~

  44. aeiou说道:

    behavior: url(ie-css3.htc); 这句是否只有IE浏览器才会执行呢?如果不是的话,怎么把这句只针对IE678? 谢哈