让IE6/IE7/IE8浏览器支持CSS3属性
2015-12-30 21:25
1016 查看
一、下载
搜索下载:ie-css3.htc,它是让IE浏览器支持CSS3表现的关键。
二、上面的是什么东西
首先说说.htc文件,.htc文件是个脚本文件,个人以为与js文件属于同一货色,只是呢,貌似htc是Internet Explorer(IE)的私生子,只有IE才认它。htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。本文的这个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发布的。如果要我说的话,我觉得就是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果。
PS:
VML相当于IE里面的画笔,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的,在我认为, VML其实是Word和HTML结合的产物。可以将Word文档另存为HTML,其中的文本和图片可以很容易的转换,但如果是手绘制的图形在以往的IE里面就无法解释了,如果都转换成图形文件又不太现实。于是微软把Word里面的图形控件结合到IE里面,使IE也具备了绘图功能。
最初由Microsoft开发的XML词表,现在也只有IE5.0以上版本对VML提供支持。
使用VML可以在IE中绘制矢量图形,所以有人认为VML就是在IE中实现了画笔的功能。
四、如何使用
使用是很容易的,看下面的示例代码:.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浏览器调用脚本作用于 4000 'box'类 */ }
可以看到,除了最后添加了behavior这么一句,CSS3属性还是那个CSS3属性,不需要化妆、修饰或是化身为变形金刚,这也是此方法的优点所在。
五、问题和必要的说明
毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
z-index值一定要比周围元素的要高,否则……只能说抱歉了~~
六、支持的样式及状态说明
参见下表:样式 | 生效 | 无效 |
---|---|---|
border-radius | 为元素四个角设置圆角属性 元素边框 | 只设置一个角落的圆角属性 |
box-shadow | 模糊大小参数 偏移值 | 不支持除了黑色(#000)以外的其他颜色 |
text-shadow | 模糊大小参数 偏移值 颜色值 | IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详 |
相关文章推荐
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 微软高管称中国是IE6消亡最大障碍
- IE7降低内存和降低CPU的几个技巧
- ie6 注释引起的问题
- 如何使用CSS3画出一个叮当猫
- IE7 beta2的CSS兼容性
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- 一段非常好的滑动门[可感应触发或点击触发]兼容IE7 IE6 FireFox Opera
- IE8发布与“.中国”域名系统启用日期不谋而合?
- 玩转浏览器IE7的5个顶级使用技巧