用html5shiv.js解决ie低版本浏览器支持html5标签

本文介绍了如何利用html5shiv.js解决IE8及以下版本浏览器对HTML5标签的兼容问题。通过JavaScript的createElement方法创建HTML5标签,使其在IE低版本中得到识别,并通过设置display属性为block实现样式效果。同时提到了html5media项目用于解决video和audio标签的兼容性问题。
摘要由CSDN通过智能技术生成

背景:众所周知,IE8及其以下的IE低版本浏览器是不支持html5标签的,更无奈的是IE9虽然支持了部分html5标签,但是对系统做了严格限制,那就是xp系统是无法装IE9的,这就把IE8、IE7这些低版本浏览器的死期更xp系统的死期狠狠地绑在了一起。微软的同志们下定了决心要干掉xp系统,无奈xp系统根深蒂结,一时无法连根拔起,就给了个几年的期限,而这期限只是停止更新,就算到了那时,谁也不能保证广大老年人是否愿意挪动一下身体去更新换代呢。用户就是上帝,你可以有你的选择,但上帝不会再眷恋着你。

实现原理:每个浏览器有一个它本身所认识的标签的列表,那么不在这个列表里面的标签我们称之为该浏览器的不可识别标签。对于ie低版本浏览器来言,html5的标签就是它的不可识别标签,在未做任何处理的情况下,这些标签在这些浏览器下是没有效果的。那么如何让这些标签能正常的展示自己以及附加的css样式呢。有人研究发现,当我们通过js的createElement方法去建立这些标签时,这些标签就可以被ie低版本浏览器识别。个人猜测应该是这些浏览器的javascript编译解析引擎在新建这些元素时,若发现他们不在可识别的列表当中就赋予它们一些默认的属性,然后添加到列表当中去。而这些默认的属性又是什么呢。下面我稍微试验一下。

 

<span style="color:#666666"><strong><!
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE来调用这个js文件。Opera,FireFox等其他非IE浏览器就会忽视这段代码,也不会存在http请求。 <!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–> 上面这段代码仅会在IE浏览器下运行,还有一点需要注意,在页面中调用html5.js文件必须添加在页面的head元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部调用。 这个html5js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5js文件直接下载下来让后上传到自己的服务器单独调用。 以下是html5js文件中的代码: (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() 除了在网页中调用包含以上代码的js文件来让IE浏览器支持HTML5元素以外,你也可以以下面这种方式把代码直接添加到网页中。 <!–[if IE]> <script> (function(){if(!/*@cc_on!@*/0)return;var e = “abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video”.split(’,'),i=e.length;while(i–){document.createElement(e[i])}})() </script> <![endif]–>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值