讓IE支持HTML5的方法
發(fā)布時(shí)間：2012-12-11 15:15:24 作者：佚名 
我要評(píng)論
我要評(píng)論越來(lái)越多的站點(diǎn)開(kāi)始使用 HTML5 標(biāo)簽，但是目前的情況是還有很多人在使用IE6、IE7、IE8。為了讓所有瀏覽者都可以正常的訪問(wèn)，解決方案有下面兩個(gè)
越來(lái)越多的站點(diǎn)開(kāi)始使用 HTML5 標(biāo)簽，但是目前的情況是還有很多人在使用IE6、IE7、IE8。為了讓所有瀏覽者都可以正常的訪問(wèn)，解決方案有下面兩個(gè)：
1.為網(wǎng)站創(chuàng)建多套模板，通過(guò)程序?qū)ser-Agent的判斷為不同的瀏覽器用戶顯示不同的頁(yè)面，例如：優(yōu)酷網(wǎng)。
2.使用Javascript來(lái)使不支持HTML5的瀏覽器支持HTML標(biāo)簽。
針對(duì)IE比較好的解決方案是html5shiv。htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別，這些新元素不能作為父節(jié)點(diǎn)包裹子元素，并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實(shí)現(xiàn)。html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的。
html5shiv的使用非常的簡(jiǎn)單，考慮到IE9是支持html5的，所以只需要在頁(yè)面head中添加如下代碼即可：
<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >
html5shiv官方網(wǎng)址：http://code.google.com/p/html5shiv/
下面是一些補(bǔ)充：
當(dāng)然包括本人BLOG在內(nèi)。關(guān)于HTML5不得不提IE，在蘋果、Google、Opera和Mozilla等主流瀏覽器廠商積極參與新版本HTML標(biāo)準(zhǔn)的制定和推廣時(shí)，微軟卻對(duì)HTML 5規(guī)范不屑一顧。然而微軟近期才表態(tài)要在IE中支持HTML 5，以致到今天為止的IE8及以下是無(wú)法支持HTML5標(biāo)簽的。但在sitepoint找到了讓IE支持HTML5辦法。
以下是在的IE 8顯示的例子,未作處理前：
讓IE(包括IE6)支持HTML5元素，我們需要在HTML頭部添加以下JavaScript，這是一個(gè)簡(jiǎn)單的document.createElement聲明，利用條件注釋針對(duì)IE在對(duì)象中創(chuàng)建對(duì)應(yīng)的節(jié)點(diǎn)。
<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
添加以上代碼后，在IE8中顯示的效果如下：
sitepoint例子中創(chuàng)建節(jié)點(diǎn)的JavaScript代碼似乎過(guò)于臃腫，在smashingmagazine提供的代碼似乎更簡(jiǎn)潔。
演示如下
提示：您可以先修改部分代碼再運(yùn)行
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5在默認(rèn)情況下表現(xiàn)為內(nèi)聯(lián)元素，對(duì)這些元素進(jìn)行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素，如下例：
header, footer, nav, section, article {
display:block;
}
1.為網(wǎng)站創(chuàng)建多套模板，通過(guò)程序?qū)ser-Agent的判斷為不同的瀏覽器用戶顯示不同的頁(yè)面，例如：優(yōu)酷網(wǎng)。
2.使用Javascript來(lái)使不支持HTML5的瀏覽器支持HTML標(biāo)簽。
針對(duì)IE比較好的解決方案是html5shiv。htnl5shiv主要解決HTML5提出的新的元素不被IE6-8識(shí)別，這些新元素不能作為父節(jié)點(diǎn)包裹子元素，并且不能應(yīng)用CSS樣式。讓CSS 樣式應(yīng)用在未知元素上只需執(zhí)行 document.createElement(elementName) 即可實(shí)現(xiàn)。html5shiv就是根據(jù)這個(gè)原理創(chuàng)建的。
html5shiv的使用非常的簡(jiǎn)單，考慮到IE9是支持html5的，所以只需要在頁(yè)面head中添加如下代碼即可：
復(fù)制代碼
代碼如下:<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >
html5shiv官方網(wǎng)址：http://code.google.com/p/html5shiv/
下面是一些補(bǔ)充：
當(dāng)然包括本人BLOG在內(nèi)。關(guān)于HTML5不得不提IE，在蘋果、Google、Opera和Mozilla等主流瀏覽器廠商積極參與新版本HTML標(biāo)準(zhǔn)的制定和推廣時(shí)，微軟卻對(duì)HTML 5規(guī)范不屑一顧。然而微軟近期才表態(tài)要在IE中支持HTML 5，以致到今天為止的IE8及以下是無(wú)法支持HTML5標(biāo)簽的。但在sitepoint找到了讓IE支持HTML5辦法。
以下是在的IE 8顯示的例子,未作處理前：
讓IE(包括IE6)支持HTML5元素，我們需要在HTML頭部添加以下JavaScript，這是一個(gè)簡(jiǎn)單的document.createElement聲明，利用條件注釋針對(duì)IE在對(duì)象中創(chuàng)建對(duì)應(yīng)的節(jié)點(diǎn)。
復(fù)制代碼
代碼如下:<!--[if IE]>
<script>
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->
添加以上代碼后，在IE8中顯示的效果如下：
sitepoint例子中創(chuàng)建節(jié)點(diǎn)的JavaScript代碼似乎過(guò)于臃腫，在smashingmagazine提供的代碼似乎更簡(jiǎn)潔。
演示如下
提示：您可以先修改部分代碼再運(yùn)行
復(fù)制代碼
代碼如下:<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "header,footer,nav,article,section".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
HTML5在默認(rèn)情況下表現(xiàn)為內(nèi)聯(lián)元素，對(duì)這些元素進(jìn)行布局我們需要利用CSS手工把它們轉(zhuǎn)為塊狀元素，如下例：
復(fù)制代碼
代碼如下:header, footer, nav, section, article {
display:block;
}
相關(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- 讓所有IE支持HTML5的解決方案.2009-10-20
如何讓IE9以下版本(ie6/7/8)認(rèn)識(shí)html5元素
瀏覽器不會(huì)給未知元素設(shè)定任何樣式（不同瀏覽器對(duì)元素會(huì)有不同的默認(rèn)樣式）在IE9之前的版本中，也不能對(duì)未知元素設(shè)定樣式，針對(duì)這個(gè)問(wèn)題有一個(gè)彌補(bǔ)方案，感興趣的朋友可以2013-04-01