让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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
使用CSS3和Checkbox实现JQuery的一些效果
Aug 03 HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 HTML / CSS
HTML中link标签属性的具体用法
May 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版 汉字转码的实现详解
2013/06/09 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
如何获取select下拉框的值(option没有及有value属性)
2013/11/08 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
EasyUI折叠表格层次显示detailview详解及实例
2016/12/28 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
Vue.directive 自定义指令的问题小结
2018/03/04 Javascript
vue和webpack打包项目相对路径修改的方法
2018/06/15 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python获取当前路径实现代码
2017/05/08 Python
Python遍历文件夹和读写文件的实现方法
2017/05/10 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
捐款通知怎么写
2015/04/24 职场文书
CSS实现漂亮的时钟动画效果的实例代码
2021/03/30 HTML / CSS
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
python实现自定义日志的具体方法
2021/05/28 Python