让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中background-clip属性与background-origin属性的用法介绍
Nov 13 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
利用Storage Event实现页面间通信的示例代码
Jul 26 HTML / CSS
html5录音功能实战示例
Mar 25 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
PHP可变函数学习小结
2015/11/29 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
js常见遍历操作小结
2019/06/06 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Python爬取三国演义的实现方法
2016/09/12 Python
python中解析json格式文件的方法示例
2017/05/03 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python求解汉诺塔游戏
2020/07/09 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
中专毕业生自荐信范文
2013/11/28 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
女方回门宴答谢词
2014/01/14 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书