如何讓IE9以下版本(ie6/7/8)認識html5元素_html5教學技巧

每個瀏覽器都有一份清單列舉自己所支援的HTML元素。不在清單上的元素都會被視為未知元素。瀏覽器不會為未知元素設定任何樣式（不同瀏覽器對元素會有不同的預設樣式）。在IE9之前的版本中，也不能對未知元素設定樣式。未知元素的DOM也顯示不正確，IE會在DOM中插入一個沒有子元素的空節點。所有你原本認為將會成為這個未知元素的子元素的元素會成為其兄弟節點。

針對這個問題有一個彌補方案，在使用裡如article標籤之前先用js創建一個虛假的article元素，IE就會識別這個元素了，而支持用css設定樣式。這個假元素甚至不需要插入DOM。

請看如下的範例：

複製程式碼

複製程式碼

程式碼

welcome to feimos's blog

This is your first time to visit this webSite.

IE6不會辨識article，所以也不會有紅色邊框。

但是如果我們在head中加入一句js，情況立刻就不一樣了。

複製程式碼

程式碼如下:

document.createElement("article");

IE6假裝它認識這個元素，正確顯示了效果。

我們可以為所有新的HTML5元素都一次建立一份虛假副本，以後就無需擔心那些不能很好支援HTML5的瀏覽器了。 Remy Sharp的HTML5 enabling script是幫助我們做這些事情的，腳本的基本想法如下：

複製程式碼

程式碼如下:：

先利用條件註解判斷是不是IE9之前版本，如果是就執行js。先把所有新標籤寫入e數組中，然後遍歷整個數組，並建立副本。

腳本已經託管在Google Project Hosting上，你可以直接外鏈這個腳本：

複製程式碼

複製程式碼

複製程式碼複製程式碼複製程式碼複製程式碼複製程式碼代碼如下:另外，這段腳本需要放在頁面起始的部分，最好是head中，不要放在底部。這樣IE在解析頁面標籤之前就會先執行這段程式碼。