让IE9以下版本的浏览器兼容HTML5的方法


Posted in HTML / CSS onMarch 12, 2014

让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文件不能在页面底部调用。
这个html5的js文件是作者把他放在Google code project上提供给大家可以直接调用的,当然,如果觉得这样会影响你的网页打开速度,你可以把html5的js文件直接下载下来让后上传到自己的服务器单独调用。
以下是html5的js文件中的代码:
复制代码
代码如下:

(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]–>
HTML / CSS 相关文章推荐
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 #HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 #HTML / CSS
html5的websockets全双工通信详解学习示例
Feb 26 #HTML / CSS
HTML5+CSS3应用详解
Feb 24 #HTML / CSS
html5中valid、invalid、required的定义
Feb 21 #HTML / CSS
html5实现多文件的上传示例代码
Feb 13 #HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 #HTML / CSS
You might like
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php代码架构的八点注意事项
2016/01/25 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JS获得选取checkbox整行数据的方法
2015/01/28 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
javascript 正则表达式分组、断言详解
2017/04/20 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
2017/08/18 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
python实现去除下载电影和电视剧文件名中的多余字符的方法
2014/09/23 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Python requests库用法实例详解
2018/08/14 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
详解python之heapq模块及排序操作
2019/04/04 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python print不能立即打印的解决方式
2020/02/19 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
阿拉伯时尚购物网站:Nisnass
2021/02/07 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
文化建设工作方案
2014/05/12 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
安全事故隐患排查治理制度
2015/08/05 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
导游词之大雁塔景区
2019/09/17 职场文书