让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背景_动力节点Java学院整理
Jul 11 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
HTML5声音录制/播放功能的实现代码
May 03 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 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启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
JavaScript基于面向对象实现的猜拳游戏
2018/01/03 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Webstorm2016使用技巧(SVN插件使用)
2018/10/29 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python使用循环实现批量创建文件夹示例
2014/03/25 Python
Python兔子毒药问题实例分析
2015/03/05 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
安全生产知识竞赛活动总结
2014/07/07 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
酒店员工手册范本
2015/05/14 职场文书
新学期主题班会
2015/08/17 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
nginx中proxy_pass各种用法详解
2021/11/07 Servers
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA