讓IE6,IE7和Ie8支持新的HTML5元素解析
我們使用新的HTML5元素時,在其它瀏覽器中能表現良好的標簽(比如Section,article,header和footer)對IE瀏覽器是個挑戰.問題的原因來在IE瀏覽器的解析機制,這些不能不識別的標簽元素導致文檔對象的錯誤展現.
為了說明這個問題,請看下面的簡短代碼:
1 2 3 4 5 <body> <section> <p>This is an example</p> </section> </body>
奇怪的是,在IE6-IE8都無法去解析 < section >標簽,導致 Dom節點看上去是下面的樣子:
BODYSECTIONP#text: This is an example/SECTION注意IE瀏覽器創建了兩個空元素.一個是 section,另一個是 /SECTION.確實是這樣的,它將不認識的結束標簽作為一個開始標簽.
1
這里有一個方便的方法解決這個問題,最早是由a comment by Sjoerd Visscher實現的.這個方法的最基礎理念就是通過使用 document.createElement(tagName) 來創建未知的元素.IE 的解析器會識別出這些元素,將他們以更合理有效的方式解析展示出來.比如我們可以使用下面的這段代碼:document.createElement("section");這樣,上面的代碼解析后就是下面的樣子:
BODYsectionP#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
留言列表
