讓所有瀏覽器接受 HTML5 新增的標籤之解法

HTML5 新增 header、footer、nav、article、hgroup... 等 Tag, 但是瀏覽器(ex: IE) 等等並不支援, 要怎麼解決呢?

靠 JavaScript 讓所有瀏覽器可以吃所有 HTML5 新增標籤的方法

在 2008年 John Resig's 就有提出簡單的解法: HTML5 Shiv

這篇寫的意思, 簡單說就是靠 JavaScript 來產生新的元素, 這樣子瀏覽器就可以認得這些 Tag, ex:

  • document.createElement("article");
  • document.createElement("footer");
  • document.createElement("header");
  • document.createElement("hgroup");
  • document.createElement("nav");

當然後續就有人把該寫的 Script 完成, 如 HTML5 enabling script, Script 如下: (幫這些新增的 Tag 分別做 createElement())

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

目前看來使用 HTML5 Tag 的網站, 每個 HTML Head 裡面都會有下述這段 code: (上述 Script 壓縮, 並透過 Google code 提供此連結)

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

看來這個是目前普遍最常用的解法囉~

如果不想用 JavaScript 來解決的話, 還是可以用下述作法:

  • ex: <footer>abc</footer>
  • 使用 <div id="footer"><footer>abc</footer></div>
  • 註: 此作法 CSS 不能指定 HTML5 的 Tag, CSS 只能抓取 #footer 來操作.

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。