好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

html5教程-让IE6/IE7/IE8浏览器支持CSS3属性

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

&nbs p;

一、下载

您可以狠狠地点击这里:ie- css3 .htc,这个玩意儿是让IE浏览器支持 CSS 3表现的关键东东。

二、上面的 是什么 东西

首先说说.htc文件,.htc文件是个脚本文件,我个人以为与js文件属于同一货色,只是呢,貌似htc是 internet E xp lorer(IE)的私生子,只有IE才认它。htc文件可以用来描述web行为,web行为允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX 控件)来完成这个功能。Stop! 别叉远了,点到为止,如果您对htc文件感兴趣,可以参见这里。

本文的这个ie-css3.htc文件看看名字,看看长相就 知道 是干嘛的了,让IE浏览器支持CSS3的一些属性。没错,就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为(比较流行的 几种 )。此htc第一段主要脚本如下:

function supportsV ML () {     if (ty PE of supportsVml.supported  ==  "un define d") {          VAR  a = document.body.appendChild(document.createElement('div'));         a.innerHTML = '<v: Shape  id="vml_flag1" adj="1" />';         var b = a. First Child;         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用于将图形数据矢量化的标记语言。这是一种基于 XM L 语法的语言,由 Autodesk 、 Mac rom edia 和 Microsoft 和 HP 公司 向 W3C 提出的 方案 。VML相当于IE里面的 画笔 ,能实现你所想要的图形,而且结合脚本,可以让图形产生动态的效果。VML是 微软 1999年9月附带IE5.0发布的……关于VML详细知识,您可以点击这里:VML 百科

如果要我说的话,我 觉得 就是IE浏览器的御用画笔,专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了,正好可以就此实现一些IE不支持的CSS3效果。

本文作者:张鑫旭,来自张鑫旭-鑫空间-鑫 生活 (http://www.zhangxinxu .COM /word Press /)

本文地址:http://www.zhangxinxu.com/word PR ess/?p=783 访问原出处,更多你未见过的前端技 术 。

四、如何使用

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

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

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

五、问题和必要的说明

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

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

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

参见下表:

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

七、实例与演示

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

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

八、结语

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

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

(本篇完)

觉得可用,就经常来吧! 欢迎评论哦!  html5教程 ,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是 为你收集整理的 html5教程-让IE6/IE7/IE8浏览器支持CSS3属性 全部内容,希望文章能够帮你解决 html5教程-让IE6/IE7/IE8浏览器支持CSS3属性 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于html5教程-让IE6/IE7/IE8浏览器支持CSS3属性的详细内容...

  阅读:64次