瀏覽器如何處理未知的HTML元素

時間 2019-11-09

原文原文鏈接

每一個瀏覽器都有一份清單列舉了它所支持的HTML元素。對於不在清單上的元素都將被視爲「未知元素」。javascript

對於未知元素（主要是如今的HTML5新的語義標籤）存在兩個基本問題：1.應當如何設定元素的樣式？2.元素的DOM是什麼樣？對於這兩個問題，不一樣的瀏覽器會有不一樣的答案。咱們來看一下IE。html

一、在IE8及8以前並不容許給未知元素設定樣式。html5

二、若是IE不能明確識別一個元素，它就會在DOM中插入一個沒有子元素的空節點。全部那些你認爲將會是這個未知元素的子元素的元素實際上會稱爲其兄弟元素。java

解決這兩個問題的方法：瀏覽器

以article標籤爲例，IE不認識這個標籤。在使用它以前先用javascript建立一個虛假的<article>元素，IE便會奇蹟般地能夠識別< article>了，並容許你用CSS給它們設定樣式。這個虛假的元素並不須要真正插入到DOM中。只須要在每一個頁面上建立一次，就足以教會IE來給這個它不認識的元素設定樣式了。這適用於全部版本的IE，甚至包括IE6！代碼以下：svn

這裏是條件註釋。IE會將其解析爲一個斷定語句：「若是當前瀏覽器是IE9以前的版本，就執行後面的代碼塊。」全部其餘的瀏覽器則會將整個代碼塊視做一段普通的HTML註釋。上述腳本代碼須要位於頁面起始部位——最好是<head>中——而不是頁面底部，這樣，IE將會在解析頁面上的標籤和屬性以前，先運行腳本代碼。還能夠外鏈這個壓縮版的腳本：<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>google

如今咱們準備就緒，就可使用這些新的HTML5語義標籤了。code