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">