http://fetchak.com/ie-css3/ie-css3.htc
一、下载
您可以狠狠地点击这里: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 (typeofsupportsVml.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);
}
returnsupportsVml.supported
}
明白人基本上都知道,这不跟js脚本一个模子里出来的嘛。也就是说,htc只是js脚本去韩国整了个容,换了副马甲而已。
三、如何工作的
要说工作原理,得有一个新角色粉墨登场,那就是“VML”。VML是The VectorMarkup 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: 10px10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */
}
可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。
五、问题和必要的说明
You would expect URLs in behavior: url(...)
to be relative to the current directory as they are in abackground-image: url(...)
style for example, but instead Microsoft decided to ignore standards here and make them relative to the docroot instead. So behavior: url(ie-css3.htc)
should work if ie-css3.htc is in the root directory of the site.
You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. There are two simple workarounds:
- Set the z-index of the IE-CSS3 element to a number larger than its surrounding elements.
- Make sure the IE-CSS3 element is positioned, such as with
position: relative
orposition: absolute
Sometimes an IE-CSS3 element will show up at a slightly different position than the original, untouched element. There could be a few reasons for this:
- You have broken tags somewhere in your markup, probably above the IE-CSS3 element.
- You are experiencing misc IE6 and IE7 bugs. Try adding the styles
zoom: 1
and/orposition: relative
to the IE-CSS3 element and its immediate parent. You could also try removing any margins on the IE-CSS3 element and/or its parent, use padding instead.
六、支持的样式及状态说明
参见下表:
样式 | 生效 | 无效 |
border-radius | 为元素四个角设置圆角属性 | 只设置一个角落的圆角属性 |
box-shadow | 模糊大小参数 | 不支持除了黑色(#000)以外的其他颜色 |
text-shadow | 模糊大小参数 | IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详 |