讓 IE8 以下的瀏覽器辨識HTML5新元素-html5.js

在 <head> 標籤區塊裏面插入以下的程式碼,讓舊版IE支援新的HTML5元素。

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

這段程式碼判斷是否為IE瀏覽器,是的話載入 html.js 這個 JavaScript 檔案,如此一來會預先建立 HTML5 新標籤,舊版IE瀏覽器因此能夠識別這些標籤語意。例如以下的配置:

<!DOCTYPE html>
<html >
<head>
    <title></title>
    <style>
        *{
            margin:0px;
            border:0px;
        }
        html,body{
            height:100%;
        }
</style>
   
</head>
<body>
    <header style="height:10%;width:100%;background-color:black;">   
    </header>
    <section style="height: 84%; width: 100%; background-color: silver;">
</section>
    <footer style="height: 6%; width: 100%; background-color: dimgray; ">
</footer>
</body>
</html>

在支援HTML5標籤的情形下的瀏覽器畫面如下:



如果是IE7以下的版本,因為無法解析header,section與footer等標籤,會出現完全空白的畫面,現在於<header>標籤嵌入相容性的JavaScript檔案html5.js即可得到正常的結果。

<head>
    <title></title>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
        // 樣式配置
</style>   
</head>


沒有留言: