HTML5有兩大特點：首先，強化了Web網(wǎng)頁的表現(xiàn)性能。其次，追加了本地數(shù)據(jù)庫等Web應(yīng)用的功能。

廣義論及HTML5時，實際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服 務(wù)（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight與Oracle JavaFX的需求，并且提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

目前HTML5已向開發(fā)人員提供了很多新的標(biāo)簽，如section，nav，article，header和footer等。這些標(biāo)簽語義化程度高，會被經(jīng)常使用，但在IE6，IE7，IE8和Firefox 2等老式瀏覽器中卻不能識別和正常使用。

一、HTML5標(biāo)簽在瀏覽器展示存在的問題

對于現(xiàn)階段來說，使用HTML5標(biāo)簽可能遇到的最大問題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚?。?dāng)我們在頁面中使用HTML5元素時，可能會得到三種不同的結(jié)果。

結(jié)果1：標(biāo)簽被當(dāng)作錯誤處理并被忽略。那么DOM構(gòu)建的時候，就會當(dāng)作這個標(biāo)簽不存在。

結(jié)果2：標(biāo)簽會被當(dāng)作錯誤處理，并在DOM構(gòu)建的時候依然會按照預(yù)期的代碼進行創(chuàng)建，并且HTML標(biāo)簽會被構(gòu)造成行內(nèi)元素（也就是說雖然不能識別，但是代碼里section標(biāo)簽依然會在dom中創(chuàng)建一個對應(yīng)section節(jié)點，但是屬于行內(nèi)元素）。

結(jié)果3：標(biāo)簽被識別為HTML5標(biāo)簽，然后用DOM節(jié)點對其進行替換。DOM在構(gòu)建的時候和預(yù)想的一致，并且合適的樣式會應(yīng)用到標(biāo)簽上（大部分情況下是塊級元素）。

有一個具體的例子，大家思考一下下面的代碼：

很多瀏覽器（比如Firefox 3.6和Safari4）解析的時候都會將div作為最外層的元素，然后div里面是一個識別不了的元素（section），它會在DOM中創(chuàng)建，并被作 為一個行內(nèi)元素存在。h1和p元素都是作為section元素的子節(jié)點。因為section在DOM中真實存在，所以也可以修改其樣式。這種情況對應(yīng)結(jié)果 2。

IE9之前的版本會認為section標(biāo)簽是一個錯誤，并直接將其忽略，那么h1和p標(biāo)簽會被解析，然后成為div標(biāo)簽的子節(jié)點。也會被認為是一個錯誤并直接跳過。在這些瀏覽器中實際有效的代碼是這樣的：

那么，舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣，其對不可識別標(biāo)簽的容錯能力還是很棒的。因為section節(jié)點沒有在DOM樹中構(gòu)建，所以也就不能給其增加樣式。這種情況對應(yīng)結(jié)果1。

當(dāng)然，支持HTML5的瀏覽器比如IE9，F(xiàn)irefox4+，Safari5+會創(chuàng)建正確的DOM結(jié)構(gòu)，然后這些標(biāo)簽會默認附帶HTML5規(guī)范中定義的默認樣式。

那么，我們所面臨的最大問題就是同樣的代碼在不同的瀏覽器中形成了不同的DOM結(jié)構(gòu)，并且含有不同的樣式。

二、如何解決HTML5標(biāo)簽不兼容

或許會有很多人在質(zhì)疑：為什么老式的瀏覽器不能識別這些標(biāo)簽？其實錯不在瀏覽器，因為在那個時代根本不存在這種標(biāo)簽，所以不能正確識別出來，而這種不尋常 的標(biāo)簽識別令DOM結(jié)構(gòu)變得異常。對此，人們想出了很多在現(xiàn)階段頁面中使用HTML5元素的解決方案。每一個解決方案為了做到兼容都會遇到一些特定的問題。跟大家分享一下：

1、實現(xiàn)標(biāo)簽被識別

我曾做個一個測試（以IE8為例），是一個文章標(biāo)題和藍色字的文章內(nèi)容，其中文章內(nèi)容用了article標(biāo)簽。代碼如下：

還有一些方法，比如嘗試使用和Tanteck方案相反的技術(shù)，也就是把HTML5元素放在div元素內(nèi)部，例如：這個方案唯一的不同是HTML5元素的位置，其他都一樣。喜歡這個技術(shù)的支持者認為他的一致性很好（適用于所有的元素，包括）。但是DOM結(jié)構(gòu)的不同讓這個方案意義變得不大。他的主要優(yōu)勢是技術(shù)上的一致性。