让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 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
使用CSS变量实现炫酷惊人的悬浮效果
Apr 26 HTML / CSS
css3翻牌翻数字的示例代码
Feb 07 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 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在服务器执行exec命令失败的解决方法
2012/03/03 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP输入流php://input实例讲解
2015/12/22 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
js实现小时钟效果
2020/03/25 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python 26进制计算实现方法
2015/05/28 Python
python简单实现计算过期时间的方法
2015/06/09 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
python线程信号量semaphore使用解析
2019/11/30 Python
python实现图片横向和纵向拼接
2020/03/05 Python
基于python实现对文件进行切分行
2020/04/26 Python
8种常用的Python工具
2020/08/05 Python
关于Python错误重试方法总结
2021/01/03 Python
学生会竞选自荐信
2013/10/12 职场文书
升职自荐信
2013/11/28 职场文书
弄虚作假心得体会
2014/09/10 职场文书
学籍证明模板
2015/06/18 职场文书
工作转正自我鉴定范文
2019/06/21 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js