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 來操作.
相關網頁
