我們使用新的HTML5元素時,在其它浏覽器中能表現良好的標簽(比如Section,article,header和footer)對IE浏覽器是個挑戰.問題的原因來在IE浏覽器的解析機制,這些不能不識別的標簽元素導致文檔對象的錯誤展現.
為了說明這個問題,請看下面的簡短代碼:
<body>
<section>
<p>This is an example</p>
</section>
</body>
奇怪的是,在IE6-IE8都無法去解析 < section >標簽,導致 Dom節點看上去是下面的樣子:
BODY
SECTION
P
#text: This is an example /SECTION 注意IE浏覽器創建了兩個空元素.一個是 section,另一個是 /SECTION.確實是這樣的,它將不認識的結束標簽作為一個開始標簽.
這裡有一個方便的方法解決這個問題,最早是由a comment by Sjoerd Visscher實現的.這個方法的最基礎理念就是通過使用 document.createElement(tagName) 來創建未知的元素.IE 的解析器會識別出這些元素,將他們以更合理有效的方式解析展示出來.比如我們可以使用下面的這段代碼:
document.createElement("section");
這樣,上面的代碼解析後就是下面的樣子:
BODY
section
P
#text: This is an example 這個技術可以讓IE6,IE7和Ie8對未知的元素解析.
為了方便起見,Remy Sharp寫了一段可以讓增強HTML5新元素展示的代碼,你可以很方便的下載和使用它們.published a simple script
這段代碼對其它浏覽器,比如:Opera 9,Firefox 3 和 Safari 3對這些新元素的解析都默認就是正確的.雖然在Firefox2中也有一些問題,但這些問題還沒有找到解決的辦法.但是相比IE的更新速度,火狐這個並不算是問題.
這種方法創建的標簽,我們無法應用於打印樣式,如果想了解如果讓IE打印樣式正確,請查看下面的文章在IE浏覽器中打印HTML5元素 (IE Print Protector)
中文原文：如何讓IE支持HTML5新元素
英文原文：Supporting New Elements in IE