HTML5新標籤在IE6/IE7/IE8中的幾種兼容方式

HTML5新標籤在IE6/IE7/IE8中的幾種兼容方式

  • coding javascript

代碼塊

<script>
     (function(){
       If(!0)
          Return;
       var e = “abbr, article, aside, audio, canvas, datalist, dialog, eventsource, figure, footer, header, hgroup, menu, meter, nav, output, progress, section, time, video,”.split(‘, ’)
       var i= e.length;
       while (i--){
          document.createElement(e[i])
   }
})()
</script>
<![endif]-->

如果是IE9z以下的IE瀏覽器將創建HTML5標籤,這樣非IE瀏覽器就會忽視這段代碼,也就不會有無謂的http請求了。

  • 使用Google或百度的html5shiv包(推薦)

代碼塊

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
**********************************************************************
<!--[if lt IE 9]>
  <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->(推薦國內用戶使用,因爲Google在國內不穩定)

但是不管使用哪種方法,首先都要初始化新標籤的CSS。因爲HTML5默認情況下表現爲內聯元素,我們需手動將其轉爲塊狀元素方便佈局

Article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block;}

但是如果IE6/IE7/IE8禁用腳本呢?我們可以參照Facebook的做法,引導用戶進入帶有noscript標識的”/?_fb_noscript=1”頁面,用HTML4標籤替換HTML5標籤,這要比爲了保持兼容性而寫大量hack的做法更輕便一些。

<noscript>
     <style>.html5-wrappers{display:none!important;}</style>
     <div class="ie-noscript-warning">您的瀏覽器禁用了腳本,請<a href="">查看這裏</a>來啓用腳本!或者<a href="/?noscript=1">繼續訪問</a>.
     </div>
</noscript>
<![endif]-->
  • 嵌套標籤

在語義化的HTML5標籤內嵌套div等可用標籤,然後只給div寫樣式。

代碼塊

<style> 
body > * .section { 
color: red; 
} 
</style> 
<![endif]--> 
<style> 
section .section { color: red; 
} 
</style> 
<section><div class="section">內容</div></section>
  • IE條件註釋

<!--[if lt IE 9]><div class="section"><![endif]--> 
<!--[if IE 9]><section class="section"><![endif]--> 
<!--[if !IE]><!--><section class="section"><!--<![endif]--> 
...... 
<!--[if lt IE 9]></div><![endif]--> 
<!--[if IE 9]></section><![endif]--> 
<!--[if !IE]><!--></section><!--<![endif]-->
  • 使用xmlns定義文檔命名空間

原有命名空間:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

HTML5以後被簡化的命名空間:

<html lang="en">
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章