HTML5新增元素如何相容於舊瀏覽器有哪些方法_html5教學技巧

一個問題，老師丟給我們的，就是：如何讓IE8-相容這些標籤？ （需要設計JS中的DOM）

雖然今天剛講的內容，但是，還是需要去了解下。

複製程式碼

程式碼如下:

頂部區域

導覽區域

文章區

底部區域

在支援HTML5標籤的瀏覽器顯示為：

|------------------------------火狐瀏覽器--------------------------------------------|

|頂部區域|

|導航區域|

|文章區域|

| |

|--------- -------------------------------------------------- ------------------------------|

而舊版的瀏覽器顯示樣式為：

------------------------------IE6瀏覽器-------------- ------------------------------
 
----------- -------------------IE8瀏覽器---------------------------- ----------------
 
都是同樣的效果，沒估計錯的話舊版瀏覽器都是不識別這些新增的標籤所以都是用行內元素來處理解決的，所以，有一個解決辦法的突破口就是讓它變成塊狀元素就不會處於同一行了，這樣在新舊瀏覽器都是可以顯示同樣的效果，再者就是讓瀏覽器識別標籤，需要新增標籤特定解決方法是：

IE8/IE7/IE6支援透過document.createElement方法產生的標籤，可以利用此特性讓這些瀏覽器支援HTML5新標籤，程式碼如下：

document.createElement（'新標籤'）; / /新增建立新標籤

JS程式碼如下：

複製程式碼

程式碼如下:

<script> <br />document.createElement('header'); <br />document.createElement('nav' ); <br />document.createElement('article'); <br />document.createElement('footer'); <br /></script>

或直接循環方式建立標籤：

複製程式碼

程式碼如下:

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(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}

CSS樣式設定預設樣式：

複製程式碼

程式碼如下:

}

} }

}

複製程式碼程式碼如下: 直接加入這一句程式碼就可實作相容問題，關於條件注意中的