让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实现轮播图效果实例
May 04 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
css3实现动画的三种方式
Aug 24 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
Jul 23 HTML / CSS
实例讲解HTML5的meta标签的一些应用
Dec 08 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
amaze ui 的使用详细教程
Aug 19 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方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
2016/09/01 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
微信小程序 页面跳转传值实现代码
2017/07/27 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
详解vue高级特性
2020/06/09 Javascript
JQuery基于FormData异步提交数据文件
2020/09/01 jQuery
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
玩转python爬虫之正则表达式
2016/02/17 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
类如何去实现接口
2013/12/19 面试题
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
上学迟到的检讨书
2014/01/11 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
灰雀教学反思
2014/04/28 职场文书
初三学习计划书范文
2014/04/30 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
Node实现搜索框进行模糊查询
2021/06/28 Javascript
Python OpenGL基本配置方式
2022/05/20 Python