让IE支持HTML5的方法


Posted in HTML / CSS onDecember 11, 2012

越来越多的站点开始使用 HTML5 标签,但是目前的情况是还有很多人在使用IE6、IE7、IE8。为了让所有浏览者都可以正常的访问,解决方案有下面两个:

1.为网站创建多套模板,通过程序对User-Agent的判断为不同的浏览器用户显示不同的页面,例如:优酷网。

2.使用Javascript来使不支持HTML5的浏览器支持HTML标签。

针对IE比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别,这些新元素不能作为父节点包裹子元素,并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单,考虑到IE9是支持html5的,所以只需要在页面head中添加如下代码即可:

复制代码
代码如下:

<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >

html5shiv官方网址:http://code.google.com/p/html5shiv/

下面是一些补充:

当然包括本人BLOG在内。关于HTML5不得不提IE,在苹果、Google、Opera和Mozilla等主流浏览器厂商积极参与新版本HTML标准的制定和推广时,微软却对HTML 5规范不屑一顾。然而微软近期才表态要在IE中支持HTML 5,以致到今天为止的IE8及以下是无法支持HTML5标签的。但在sitepoint找到了让IE支持HTML5办法。

以下是在的IE 8显示的例子,未作处理前:
让IE支持HTML5的方法
让IE(包括IE6)支持HTML5元素,我们需要在HTML头部添加以下JavaScript,这是一个简单的document.createElement声明,利用条件注释针对IE在对象中创建对应的节点。

复制代码
代码如下:

<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

添加以上代码后,在IE8中显示的效果如下:
让IE支持HTML5的方法
sitepoint例子中创建节点的JavaScript代码似乎过于臃肿,在smashingmagazine提供的代码似乎更简洁。
演示如下

提示:您可以先修改部分代码再运行
复制代码
代码如下:

<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->

HTML5在默认情况下表现为内联元素,对这些元素进行布局我们需要利用CSS手工把它们转为块状元素,如下例:
复制代码
代码如下:

header, footer, nav, section, article {
display:block;
}
HTML / CSS 相关文章推荐
全面解析CSS Media媒体查询使用操作(推荐)
Aug 15 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
一篇文章带你学习CSS3图片边框
Nov 04 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 HTML / CSS
IE支持HTML5的解决方法
Oct 20 #HTML / CSS
HTML5 Canvas概述
Aug 26 #HTML / CSS
HTML5 canvas 基本语法
Aug 26 #HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 #HTML / CSS
HTML5 解析规则分析
Aug 14 #HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 #HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 #HTML / CSS
You might like
解析php中heredoc的使用方法
2013/06/17 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
Exjs 入门篇
2010/04/07 Javascript
页面使用密码保护代码
2013/04/10 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
Python 列表list使用介绍
2014/11/30 Python
Python3写入文件常用方法实例分析
2015/05/22 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
简单谈谈python的反射机制
2016/06/28 Python
python3 requests中使用ip代理池随机生成ip的实例
2018/05/07 Python
python使用numpy读取、保存txt数据的实例
2018/10/14 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
深入学习python多线程与GIL
2019/08/26 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
python学习将数据写入文件并保存方法
2020/06/07 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python re模块常见用法例举
2021/03/01 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
出纳岗位职责范本
2013/12/01 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书