瀏覽器H5新標簽的兼容性的解決

讓低版本的IE瀏覽器（IE6/IE7/IE8）支持HTML5 header等新標簽



html5提供的一些新標簽（article,aside,dialog,footer,header,section,footer,nav,figure,menu）使用起來非常的方便，但是低版本的IE瀏覽器（IE6/IE7/IE8）對的這些新標簽“視而不見”，根本識別不了，不免讓前端工作者們望而卻步。


下面我們收集整體了一些方法，讓你再也沒有后顧之憂了。


一、引用JS庫


讓IE（ie6/ie7/ie8）支持HTML5元素，我們需要在HTML頭部添加以下JavaScript，這是一個簡單的document.createElement聲明，利用條件注釋針對IE來調用這個js文件。Opera，FireFox等其他非IE瀏覽器就會忽視這段代碼，也不會存在http請求。


　　方式一：引用google的html5.js文件，代碼內容可以自己下載下來看。


　　<!–[if lt IE9]> 
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>


　　將以上代碼放到head標簽區間，由於現在國內基本上直接訪問不了谷歌的服務器，如果直接引入外部JS，會讓網頁打開非常慢，所以建議大家先下載到服務器上，再進行本地文件的引用。


html5.js下載


　　方式二：自己coding JS搞定。


<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);
     var i= e.length;
     while (i–){
         document.createElement(e[i])
     } 
})() 
</script>


　　不管你用上面哪中方式，請記得在CSS中進行如下定義，目的是讓這些標簽成為塊狀元素，just like div。

/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}