这篇文章发布于 2010年04月27日,星期二,16:56,归类于 CSS相关。 阅读 521771 次, 今日 2 次 123 条评论
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 { /* 现代浏览器以及使用了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属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。
五、问题和必要的说明
毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:
- 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
- z-index值一定要比周围元素的要高,否则……只能说抱歉了~~
- http协议访问。
- 原生IE浏览器访问,兼容模式显示可能没效果。
六、支持的样式及状态说明
参见下表:
样式 | 生效 | 无效 |
---|---|---|
border-radius | 为元素四个角设置圆角属性 元素边框 |
只设置一个角落的圆角属性 |
box-shadow | 模糊大小参数 偏移值 |
不支持除了黑色(#000)以外的其他颜色 |
text-shadow | 模糊大小参数 偏移值 颜色值 |
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详 |
七、实例与演示
我自己做了个demo页面,实现的效果是CSS3的圆角以及投影效果,您可以狠狠地点击这里:IE支持CSS3 demo
以下为IE6浏览器下的效果截图:
八、结语
此htc文件是老外写的,所以要是遇到不知名的问题,可以向我询问,但是我不能保证可以给出一个满意的答复。就这些,祝您好运。
如果本文解决方案你用得不顺利,试试譬如cssSandpaper这个解决方案。
本文为原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=783
(本篇完)
- PIE使IE支持CSS3圆角盒阴影与渐变渲染 (0.533)
- CSS "渐进增强"在web制作中常见应用举例 (0.480)
- IE下css bug集合-翻译自haslayout.net (0.470)
- 区分IE8/IE7/IE6及其他浏览器-CSS "\9"hack (0.459)
- CSS vertical-align的深入理解(二)之text-top篇 (0.459)
- CSS3模拟window7炫酷界面效果展示 (0.440)
- CSS 相对/绝对(relative/absolute)定位系列(三) (0.409)
- CSS content内容生成技术以及应用 (0.386)
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器 (0.386)
- 小tip:IE不支持CSS3多背景的替代解决方案 (0.386)
- 小卖弄:纯CSS实现的outline切换transition动画效果 (RANDOM - 0.016)
服务器环境下无效,本地打开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’类 */
}
这个属性行不通是怎么回事?
.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;
}
完全不能用啊,神马情况
刚试了一下,ie7/8都可以的,跟文章的说一样配置就可以了
怎么配置?
要使用这个文件去哪里下载引入啊,引入了这个文件就可以支持background-size,min-width,这些新属性了吗?
在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’类 */
}
哈哈
你的元素没有定位啊
就是在IE的低版本下的css3属性太假了
那是不是说,有了prefixfree就没这个htc什么事儿了?
请问这个文件怎么引入页面啊?用link标签?
ie8根本就不行,还说兼容
你好关于您给的宝贵意见,我经过测试发现有一个问题,就是为了让浏览器识别css3的属性,但是有一个属性box-shadow这个属性还想只能设置一个单方向(从左向右,从上到下得到方向)另外不能设置一些其他的颜色值,这一点不是太美好
试了下,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”);
为什么我按照这个方法试了还是不行嘞~
.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);
}
为什么不支持旋转属性 transform:rotate(45deg)
你这个dome 好像在ie 8 的浏览器下看不到效果 。
不好使
请问你后来找到解决方法了吗?
不行
ie-css3.htc只能支持border-radius、box-shadow、text-shadow。并且必须定位和z-index值大于周围元素。局限性很大,有更好的方法吗。
重点是我想问。在ie8里怎么兼容rgba。在网上找到一些方法 利用filter值。可是使用filter值后,元素可以透明,但是子元素溢出部分不能显示。有更好的解决办法吗?
貌似在IE9上回报错
https://segmentfault.com/q/1010000007369427
不支持跨域
不能兼容,就不要写出来了,好 么,浪费我的时间!!!!!!以后瞪大眼睛在发表
并不能支持IE8啊我试了,并不能支持。
使用后效果到是有了 但如何解决背景图片重复的问题
以前在公司项目上试过,但是没有效果,今天再次试了试,加载了几分钟才实现效果。效果是实现了,但是也因此拖慢了响应速度。。。。(┬_┬)
看了鑫哥的这么多文章,今天才知道这张图片是张含韵!
ie8下圆角不生效【http://www.zhangxinxu.com/study/201004/ie6-ie7-ie8-support-css3.html】
ie8下没效果
站长的方法虽好,但好像不能适合所有的CSS3样式。
试用了,没效果。
只能用到背景或者边框才可以吗,图片是不是不可以
ie9下报错,怎么回事啊,求大神指导啊
SCRIPT5007: 无法获取未定义或 null 引用的属性“push”
文件: ie-css3.htc,行: 150,列: 2
遇到了同一个问题,请问解决了没有??
我也遇到了这个问题,请问解决了吗
好巧
找到解决办法了。 在css里设置position:relative;zoom:1;我做的测试时解决了,最重要的是zoom:1;大家可以去试试;
我试了下,IE5可以,但是IE6、7、8都不行
IE5??我莫名的笑了一下~给ie5做兼容~
赞,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();来解决的吧。
ie8 下面的 transform:rotate();属性难道不支持吗?
张老师,我在本地测试的时候,在引用ie-css3.htc的情况下,背景图片尺寸小于div的尺寸时,在ie9以下背景图片会repeat。打扰老师了,谢谢~
在引用ie-css3.htc的情况下,背景图片尺寸小于div的尺寸时,在ie9以下背景图片会repeat。我也遇到这个问题了,还没解决,
老师,我试了这个方法,还有PIE的方法,在IE7 8下都没有实现圆角和阴影功能啊,还有我把你的这两个demo都拿到IE 7 8下试了,也是没有圆角的。。。。。。。
这个页面在ie里打开没有效果
别直接网上看,你在本地测试,有效果的。
那么其他的css3属性能不能支持呢,比如说translate、动画啊什么的?!
以前用过这个方法,记得是可以的,但是现在是不是不支持了呢,楼主的链接在ie7,8下没有效果,资源有限,请楼主检查更新。
我知道问题所在了, behavior: url(ie-css3.htc);只能这样写,不可以 behavior: url(http://www.zhangxinxu.com/study/down/ie-css3.htc);原因不知
试试 behavior:url(‘http:…..’);
我如此复制在根目录下,代码里也引用了htc文件,但在ie8下没有变化。
另外,如何让ie8支持css3里的@media?急求办法
需要使用respond.js
楼主我怎么发现box-shadow只支持黑色
好吧,自己查了一番资料,box-shadow只支持#000;
http://bloggingexperiment.com/css3-ie-support/
另外这个库很不错,是jquery他爸爸写的
http://css3pie.com/
想问一下对于:before和:after两个伪类貌似不支持呢
该插件,只要定义标签的任何一个上级定义了背景,在IE8下直接OVER..
呵呵,IE10里不用加那个也可以正常显示的, 你这个对于圆角没用啊?
拜托,ie10是支持部分css3的,文章说的是不支持css3的ie789三兄弟
那请问楼主要把 ie-css3.htc 这个文件放在与CSS一起的文件夹吗?
我这边不好用啊~~~
behavior: url(ie-css3.htc); 这句是否只有IE浏览器才会执行呢?如果不是的话,怎么把这句只针对IE678? 谢哈