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

廣義論及HTML5時(shí)，實(shí)際指的是包括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的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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