让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教程(6):创建网站多列
Apr 02 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 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中文件上传的一个问题
2010/09/04 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php实现微信企业转账功能
2018/10/02 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
jquery ready()的几种实现方法小结
2010/06/18 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JS常见算法详解
2017/02/28 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
用Python编写web API的教程
2015/04/30 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
python操作excel的方法
2018/08/16 Python
python模块常用用法实例详解
2019/10/17 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Java程序员面试90题
2013/10/19 面试题
毕业生自我鉴定实例
2014/01/21 职场文书
大学生个人事迹材料
2014/01/21 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
学习礼仪心得体会
2014/09/01 职场文书
秦兵马俑导游词
2015/02/02 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang