html5shiv让IE6-IE8支持HTML5标签

越来越多的站点开始使用 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://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]–>

html5shiv官方网址:http://github.com/afarkas/html5shiv (由谷歌搬到github了)

之前的一篇文章中我们提到的Modernizr也同样具有让IE支持HTML5标签,不过这个js支持的浏览器不止IE,还支持老版本的firefox等,会更加全面一些。

另外CSS还需要重置一下HTML5标签的样式

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

当然如果你需要的元素可知,并且是很少,只需要添加以下js代码在头部就可以:

<!--[if lt IE 9]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

或者

<!--[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]-->
你需要哪个元素就添加那句,比如你只需要canvas这个。你只需要添加下面代码即可
<!--[if lt IE 9]>
<script>
document.createElement("canvas");
</script>
<![endif]-->

关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流