让IE6,7,8支持HTML5新标签的方法

时间:2021-10-18 10:04:13

很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了section,article,header等HTML5新标签。考虑到目前win7自带的IE浏览器版本是IE8,而IE8不支持HTML语义化新标签,所以有必要对HTML5新标签进行兼容,所谓兼容,主要是让这些html5标签显示为块级元素, 并且使低版本的浏览器认为它们是标签。为此我们需要在页面中添加一个HTML5 shiv插件, 它的作用是调用document.createElement将所有HTML5新标签重新生成,低版本IE浏览器再遇到html5新标签时,将其解析为标签。

考虑到IE9是支持html5的,所以要对IE浏览器的版本进行判断,只有IE9以下的版本才执行此脚本。

<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

此插件的内容如下所示:

(function(){if(!/*@cc_on!@*/0)return;var e ="abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()

注意:要将这段代码放到head而不是body后面,因为浏览器是从上到下对html代码进行执行和解析的,在页面渲染之后再执行HTML5 shiv脚本就没有意义了.

此外,head部分的css里面应加上这段,是html5新标签显示为块级元素:

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

完整的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>让旧浏览器支持HTML5新增标签</title>
<style type="text/css">
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
display: block;
}
</style>
   <!--[if lt IE 9]>
    <script src="dist/html5shiv.js"></script>
   <![endif]-->
</head>
<body>
<header>顶部内容</header>
<nav>导航内容</nav>
<article>文章内容</article>
<footer>底部内容</footer>
</body>
</html>