很多网站对网页进行重构的时候,提高标签的语义性,在网页中大量使用了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>