文章標(biāo)題

這是文章內(nèi)容，應(yīng)該是一段藍(lán)色的文字。在老式瀏覽器中，如果不做hack將顯示異常。

在IE8瀏覽器中，顯示如下：IE8不能識(shí)別article標(biāo)簽， 定義在標(biāo)簽上的CSS樣式?jīng)]有起作用。 在IE8中，被解釋成命名為和

兩個(gè)空的標(biāo)簽元素，與文章內(nèi)容并列為兄弟節(jié)點(diǎn)，如下圖所示：

既然因?yàn)椴荒茏R(shí)別標(biāo)簽而不能使用，那我的解決辦法就是讓標(biāo)簽被識(shí)別出來(lái)。所幸，簡(jiǎn)單地通過(guò) 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)用的問(wèn)題。老版本的IE不會(huì)識(shí)別不明元素已經(jīng)是一個(gè)耳熟能詳?shù)奶匦?，而如果這些元素已經(jīng)通 過(guò)document.createElement創(chuàng)建，那么瀏覽器就可以識(shí)別這些標(biāo)簽，并可以將其在DOM樹(shù)中構(gòu)建，然后允許開(kāi)發(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è)問(wèn)題，可以把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)些莫名其妙的問(wèn)題。

header,nav,article,section,aside,footer{display:block;}

另外excanvas.js是Google為IE6支持canvas元素寫(xiě)的腳本，以后我會(huì)跟大家再細(xì)說(shuō)這樣的例子，感興趣的朋友可以去試試。

（2）使用Kill IE6

除此之外你還可以使用KILL IE6一族，前提是你的瀏覽器允許執(zhí)行JS文件。方法很簡(jiǎn)單，在你的網(wǎng)站的之前加上以下代碼就可以了：

上面寫(xiě)的前綴html5是純粹是用于這個(gè)例子而且也不是官方支持的，你甚至可以用"foo"作為前綴，結(jié)果還是一樣。有了前綴之后，IE會(huì)識(shí)別新的元素，從而可以應(yīng)用樣式。在其他瀏覽器中一樣有效，那么最后，你就成功地在各個(gè)瀏覽器中構(gòu)建了一樣的元素和一樣的樣式。

這個(gè)方法的缺陷很明顯：你必須在HTML文檔中使用XML格式的命名空間，同樣，你也需要在css中這么做:

html5\:section {

display: block;

}

點(diǎn)評(píng)：這并不是我期望Web開(kāi)發(fā)者編寫(xiě)代碼的方式。雖然這是一個(gè)非常杰出的解決方案，但是這讓?xiě)?yīng)用變得不自然。我不希望看到文件中充滿(mǎn)了帶命名空間的元素。

4、Bulletproof技術(shù)（防彈衣技術(shù)）

說(shuō)實(shí)話(huà)，我是第一次接觸到這個(gè)技術(shù)，建議在所有新的HTML5塊級(jí)元素中增加一個(gè)內(nèi)部的div元素，然后包含一個(gè)CSS class，用這個(gè)元素來(lái)替代HTML元素（類(lèi)似在里面穿了一件防彈衣），例如：

在應(yīng)用樣式的時(shí)候，Tantek推薦直接給div增加樣式，而不是給新元素增加樣式

推薦使用：

.section {

color: blue;

}

而不是：

section {

color: blue;

}

這個(gè)方案的原理是用簡(jiǎn)單的方式將原來(lái)的樣式應(yīng)用方式轉(zhuǎn)移到一個(gè)代表了HTML5標(biāo)簽的元素上。由于我一般情況下不會(huì)將樣式通過(guò)標(biāo)簽名的方式應(yīng)用到元素上，所以也并不完全支持這個(gè)建議。

這個(gè)方案的缺陷是不同的瀏覽器構(gòu)建了不同的DOM結(jié)構(gòu)，那么你必須在編寫(xiě)JavaScript和CSS的時(shí)候格外小心。獲取子節(jié)點(diǎn)或者父節(jié)點(diǎn)的時(shí)候，不同的瀏覽器返回的結(jié)果可能會(huì)不一樣。特別是在下面的代碼中：

5、反向的bulletproof技術(shù)

本文名稱(chēng)：解決IE瀏覽器不兼容H5標(biāo)簽的辦法有哪些？
網(wǎng)站鏈接：http://m.rwnh.cn/news2/232152.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信公眾號(hào)、網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)