如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
我要評(píng)論每個(gè)瀏覽器都有一份清單列舉自己所支持的HTML元素。不在清單上的元素都將被視為未知元素。瀏覽器不會(huì)給未知元素設(shè)定任何樣式（不同瀏覽器對(duì)元素會(huì)有不同的默認(rèn)樣式）。在IE9之前的版本中，也不能對(duì)未知元素設(shè)定樣式。未知元素的DOM也顯示不正確，IE會(huì)在DOM中插入一個(gè)沒(méi)有子元素的空節(jié)點(diǎn)。所有你原本認(rèn)為將會(huì)成為這個(gè)未知元素的子元素的元素會(huì)成為其兄弟節(jié)點(diǎn)。
針對(duì)這個(gè)問(wèn)題有一個(gè)彌補(bǔ)方案，在使用里如article標(biāo)簽之前先用js創(chuàng)建一個(gè)虛假的article元素，IE就會(huì)識(shí)別這個(gè)元素了，而支持用css設(shè)定樣式。這個(gè)虛假元素甚至都不需要插入到DOM中。
請(qǐng)看如下的例子：
< !DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>unknown elements</title>
<style>
article{display:block;border:1px solid red}
</style>
</meta></head>
<body>
<article>
<h1>welcome to feimos's blog</h1>
<p>This is your <span>first time to visit this webSite.</span></p>
</article>
</body>
</html>
IE6不會(huì)識(shí)別article，所以也不會(huì)有紅色邊框。
但是如果我們?cè)趆ead中加入一句js，情況立馬就不一樣了。
<script type="text/javascript">
document.createElement("article");
</script>
IE6假裝它認(rèn)識(shí)這個(gè)元素，正確顯示了效果。
我們可以為所有新的HTML5元素都一次性創(chuàng)建一份虛假副本，以后就無(wú)需擔(dān)心那些不能良好支持HTML5的瀏覽器了。Remy Sharp的HTML5 enabling script就是幫助我們做這些事情的，該腳本的基本想法如下：
<!--[if lt IE 9]>
<script type="text/javascript">
var e=("abbr,article,aside,audio,canvas,datalist,details,"+
"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+
"progress,section,time,video").split(',');
for(var i=0;i<e .length;i++){
document.createElement(e[i]);
}
</script>
< ![endif]-->
首先利用條件注釋判斷是不是IE9之前版本，如果是就執(zhí)行js。先把所有新標(biāo)簽寫入e數(shù)組中，然后遍歷整個(gè)數(shù)組，并創(chuàng)建副本。
該腳本已經(jīng)托管在Google Project Hosting上，你可以直接外鏈這個(gè)腳本：
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
< ![endif]-->
另外，這段腳本需要放在頁(yè)面起始的部分，最好是head中，不要放在底部。這樣IE在解析頁(yè)面標(biāo)簽之前就會(huì)先運(yùn)行這段代碼。
相關(guān)文章
HTML5之HTML元素?cái)U(kuò)展(上)—新增加的元素及使用概述
HTML5中加入了全新的結(jié)構(gòu)型元素，例如頁(yè)眉header，頁(yè)腳footer，導(dǎo)航nav，內(nèi)容article，章節(jié)section等除了這種整個(gè)頁(yè)面的結(jié)構(gòu)型元素，html5也加入了塊級(jí)別的語(yǔ)義元素,感興趣2013-01-31- 今天把網(wǎng)頁(yè)改成了HTML5的，調(diào)試了一下，在FF和Opera中都顯示正常了，到了IE6上卻變得面目全非了。GOOGLE了一下，發(fā)現(xiàn)了html5shiv這個(gè)項(xiàng)目，可以把HTML5的新元素轉(zhuǎn)換成IE6認(rèn)2011-11-23
- 學(xué)習(xí)w3c是看到一個(gè)檢測(cè)您的瀏覽器是否支持 HTML5 視頻的方法，在這里與大家分享下，感興趣的各位可以參考下哈，希望可以幫助到你2013-03-28
幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽的幾個(gè)方法
html5大行其道的時(shí)代已經(jīng)到來(lái),如果還在糾結(jié)于，是否應(yīng)該掌握html5和css3技術(shù)時(shí)，請(qǐng)狠狠的抽自己幾個(gè)嘴巴，然后，苦學(xué)吧！下面我們來(lái)看幾個(gè)解決兼容IE6\7\8不支持html5標(biāo)簽2013-01-07html5 canvas-1.canvas介紹(hello canvas)
大家都知道，目前并不是所有的瀏覽器中支持html5，就算是支持html5的瀏覽器，也不見(jiàn)得支持html5所有的新特性,建議大家使用firefox（開(kāi)發(fā)者的最愛(ài)）或者是chrome瀏覽器，我2013-01-07html5 瀏覽器支持 如何讓所有的瀏覽器都支持HTML5標(biāo)簽樣式
如今HTML5愈來(lái)愈引發(fā)大家的關(guān)注了，HTML5的開(kāi)發(fā)者將必須考慮向下兼容的問(wèn)題:如何讓所有的瀏覽器都能識(shí)別HTML5標(biāo)簽樣式2012-12-07input file上傳文件樣式支持html5的瀏覽器解決方案
最近在使用file上傳控件，發(fā)現(xiàn)了file上傳控件的兩個(gè)兼容性問(wèn)題:一個(gè)是file上傳控件在火狐下無(wú)法通過(guò)css改變width，另一個(gè)是file上傳控件在不同的瀏覽器下的外觀和行為都不2012-11-14- 越來(lái)越多的站點(diǎn)開(kāi)始使用 HTML5 標(biāo)簽，但是目前的情況是還有很多人在使用IE6、IE7、IE8。為了讓所有瀏覽者都可以正常的訪問(wèn)，解決方案有下面兩個(gè)2012-12-11
- 讓所有IE支持HTML5的解決方案.2009-10-20