如何讓IE支持HTML5

小編給大家分享一下如何讓IE支持HTML5，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

越來(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中添加如下代碼即可：

復(fù)制代碼

代碼如下:

<!-–[if lt IE 9]--><script src=" http://html5shiv.googlecode.com/svn/trunk/html5.js "></script ><!--[endif]–- >

下面是一些補(bǔ)充：

當(dāng)然包括本人BLOG在內(nèi)。關(guān)于HTML5不得不提IE，在蘋(píng)果、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; 
}

以上是“如何讓IE支持HTML5”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！