让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实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
html5 div布局与table布局详解
Nov 16 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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
用PHP4访问Oracle815
2006/10/09 PHP
PHP新手上路(三)
2006/10/09 PHP
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
ajax实现无刷新分页(php)
2010/07/18 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php实现的简单日志写入函数
2015/03/31 PHP
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
nodejs 提示‘xxx’ 不是内部或外部命令解决方法
2014/11/20 NodeJs
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python实现超简单端口转发的方法
2015/03/13 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python实现图片识别汽车功能
2018/11/30 Python
深入了解python列表(LIST)
2020/06/08 Python
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
同事吵架检讨书
2014/02/05 职场文书
销售开票员岗位职责
2015/04/15 职场文书
怎样写工作总结啊!
2019/06/18 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers