讓IE6,7,8支援HTML5新標籤的方法

孤舟蓑翁發表於2016-04-21
HTML

很多網站對網頁進行重構的時候,提高標籤的語義性,在網頁中大量使用了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>

 

相關文章