HTML5有兩大特點(diǎn):首先,強(qiáng)化了Web網(wǎng)頁(yè)的表現(xiàn)性能。其次,追加了本地?cái)?shù)據(jù)庫(kù)等Web應(yīng)用的功能。
廣義論及HTML5時(shí),實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對(duì)于需要插件的豐富性網(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)簽在瀏覽器展示存在的問題
對(duì)于現(xiàn)階段來說,使用HTML5標(biāo)簽可能遇到的最大問題就是如何在不支持新標(biāo)簽的瀏覽器中做恰當(dāng)?shù)奶幚?。?dāng)我們?cè)陧?yè)面中使用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è)對(duì)應(yīng)section節(jié)點(diǎn),但是屬于行內(nèi)元素)。
結(jié)果3:標(biāo)簽被識(shí)別為HTML5標(biāo)簽,然后用DOM節(jié)點(diǎn)對(duì)其進(jìn)行替換。DOM在構(gòu)建的時(shí)候和預(yù)想的一致,并且合適的樣式會(huì)應(yīng)用到標(biāo)簽上(大部分情況下是塊級(jí)元素)。
有一個(gè)具體的例子,大家思考一下下面的代碼:
title
text
很多瀏覽器(比如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í)存在,所以也可以修改其樣式。這種情況對(duì)應(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í)際有效的代碼是這樣的:
title
text
那么,舊版本的IE瀏覽器除了生成的DOM結(jié)構(gòu)和其他瀏覽器不一樣,其對(duì)不可識(shí)別標(biāo)簽的容錯(cuò)能力還是很棒的。因?yàn)閟ection節(jié)點(diǎn)沒有在DOM樹中構(gòu)建,所以也就不能給其增加樣式。這種情況對(duì)應(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)變得異常。對(duì)此,人們想出了很多在現(xiàn)階段頁(yè)面中使用HTML5元素的解決方案。每一個(gè)解決方案為了做到兼容都會(huì)遇到一些特定的問題。跟大家分享一下:
1、實(shí)現(xiàn)標(biāo)簽被識(shí)別
我曾做個(gè)一個(gè)測(cè)試(以IE8為例),是一個(gè)文章標(biāo)題和藍(lán)色字的文章內(nèi)容,其中文章內(nèi)容用了article標(biāo)簽。代碼如下:
article{color:#06F;}
文章標(biāo)題
這是文章內(nèi)容,應(yīng)該是一段藍(lán)色的文字。在老式瀏覽器中,如果不做hack將顯示異常。
在IE8瀏覽器中,顯示如下:IE8不能識(shí)別article標(biāo)簽, 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。 在IE8中,
既然因?yàn)椴荒茏R(shí)別標(biāo)簽而不能使用,那我的解決辦法就是讓標(biāo)簽被識(shí)別出來。所幸,簡(jiǎn)單地通過 document.createElement(tagName)即可以讓瀏覽器識(shí)別標(biāo)簽和CSS引擎知道該標(biāo)簽的存在。假設(shè)我們上面的例子 的
區(qū)域加上如下代碼:document.createElement('article');
IE8瀏覽器中的DOM解釋就會(huì)變成下圖所示:自然,文字也顯示成正常的藍(lán)色。如下圖所示:
2、JavaScript解決方案
JavaScript解決方案目的是解決在舊版本的IE中樣式應(yīng)用的問題。老版本的IE不會(huì)識(shí)別不明元素已經(jīng)是一個(gè)耳熟能詳?shù)奶匦?,而如果這些元素已經(jīng)通 過document.createElement創(chuàng)建,那么瀏覽器就可以識(shí)別這些標(biāo)簽,并可以將其在DOM樹中構(gòu)建,然后允許開發(fā)者對(duì)其應(yīng)用樣式。
這個(gè)方法可以確保HTML5標(biāo)簽?zāi)茉谂f版本IE中對(duì)應(yīng)創(chuàng)建DOM節(jié)點(diǎn),然后可以對(duì)其應(yīng)用樣式。這個(gè)方法將HTML5塊級(jí)元素設(shè)置成display:block,從而可以在各個(gè)瀏覽器中做到兼容。
今天測(cè)試把網(wǎng)頁(yè)改成了HTML5的,調(diào)試了一下,在FF和Opera中都顯示正常了,到了IE6上卻變得面目全非了。對(duì)此我還特意去找了一些使用JS代碼支持HTML5標(biāo)簽元素的方法,在此也跟大家分享一下:
(1)使用html5shiv
查看了一下,發(fā)現(xiàn)了html5shiv能解決這個(gè)問題,可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)識(shí)的內(nèi)容。只需要在你的head中調(diào)用這段代碼就行:
當(dāng)然你也可以直接把這個(gè)文件下載到自己的網(wǎng)站上。但這個(gè)文件必須在head標(biāo)簽中調(diào)用,因?yàn)镮E必須在元素解析這前知道這些元素,才能啟作用!
但還要提醒你一下:
還要在你的CSS文件中加上以下代碼,不然有可能會(huì)出現(xiàn)些莫名其妙的問題。
header,nav,article,section,aside,footer{display:block;}
另外excanvas.js是Google為IE6支持canvas元素寫的腳本,以后我會(huì)跟大家再細(xì)說這樣的例子,感興趣的朋友可以去試試。
(2)使用Kill IE6
除此之外你還可以使用KILL IE6一族,前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡(jiǎn)單,在你的網(wǎng)站的 之前加上以下代碼就可以了:
上面寫的