让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 相关文章推荐
CSS3 制作绽放的莲花采用效果叠加实现
Jan 31 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
May 07 HTML / CSS
深入理解HTML的FormData对象
May 17 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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作为Shell脚本语言使用
2006/10/09 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
围观tangram js库
2010/12/28 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
AngularJS中实现动画效果的方法
2016/07/28 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
在python的WEB框架Flask中使用多个配置文件的解决方法
2014/04/18 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python enumerate函数的使用方法总结
2017/11/15 Python
Python错误处理操作示例
2018/07/18 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
美国网上鞋城:Shoeline.com
2016/11/17 全球购物
数据库基础的一些面试题
2012/02/25 面试题
我的求职择业计划书
2014/04/04 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
党员干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android