让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 相关文章推荐
纯CSS实现颜色渐变效果(包含环形渐变、线性渐变、彩虹效果等)
May 07 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
详解HTML5新增标签
Nov 27 HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
Jan 03 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
使用html5实现表格实现标题合并的实例代码
May 13 HTML / CSS
在CSS中使用when/else的方法
Jan 18 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 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中http_build_query 的一个问题
2012/03/25 PHP
php学习笔记之面向对象
2014/11/08 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
JCalendar 日历控件 v1.0 beta[兼容IE&amp;Firefox] 有文档和例子
2007/05/30 Javascript
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
vue.js入门教程之绑定class和style样式
2016/09/02 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
python复制文件的方法实例详解
2015/05/22 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python----数据预处理代码实例
2019/03/20 Python
Python异常处理例题整理
2019/07/07 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
Selenium执行完毕未关闭chromedriver/geckodriver进程的解决办法(java版+python版)
2020/12/07 Python
儿科护理实习自我鉴定
2013/09/19 职场文书
90后毕业生的求职信范文
2013/09/21 职场文书
旅游活动总结
2014/08/27 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
同学毕业留言寄语
2015/02/27 职场文书
2015最新民情日记范文
2015/06/26 职场文书
初中毕业生感言
2015/07/31 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
python3实现无权最短路径的方法
2021/05/12 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers