1. 程式人生 > >解決低版本IE關於html5新特性的兼容性問題html5shiv.js和Respond.js

解決低版本IE關於html5新特性的兼容性問題html5shiv.js和Respond.js

新標簽 解析 解決 res 實現 運行 文件 nsh clas

插件:html5shiv.js 讓IE9以下版本支持html5新標簽,git地址https://github.com/aFarkas/html5shiv

用於解決IE9以下版本瀏覽器對HTML5新增標簽不識別,並導致CSS不起作用的問題。所以我們在使用過程中,想要讓低版本的瀏覽器,即IE9以下的瀏覽器支持,那麽這款html5shiv.js是一個非常好的選擇!

使用方法,在<head>內添加如下代碼:

<!--[if lt IE 9]>
	<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->

上面這段代碼僅會在IE瀏覽器下運行,還有一點需要註意,在頁面中調用html5shiv.js文件必須添加在頁面的head元素內,因為IE瀏覽器必須在元素解析前知道這個元素,所以這個js文件不能在頁面底部調用。

插件:Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持媒體查詢。git地址https://github.com/FOmaerl/Respond.js

響應式布局,理想狀態是,對PC/移動各種終端進行響應。媒體查詢的支持程度是IE9+以及其他現代的瀏覽器,但是IE8在市場當中仍然占據了比較大量的市場份額,使我們不得不進行IE低端瀏覽器的考慮。那麽如何在IE6~8瀏覽器中兼容響應式布局呢? 這裏我們需要借助這樣一個文件:respond.js

.

Respond.js 是一個快速、輕量的 polyfill,用於為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-widthmax-width特性,實現響應式網頁設計(Responsive Web Design)。

使用方法:

<!--[if lt IE 9]>
	<script src="js/respond.js"></script>
<![endif]-->

引入到css文件後面,且越早引入越好,這樣在IE下面看到頁面閃屏的概率就越低,因為最初css會先渲染出來,如果respond.js加載得很後面,這時重新根據media query

解析出來的css會再改變一次頁面的布局等,所以看起來有閃屏的現象.

插件:excanvas.js ,IE8 及以下的瀏覽器不兼容 canvas,可以使用 ExplorerCanvas 做兼容性的替代。git地址:https://github.com/yinso/excanvas

使用方法,最好在<head>標簽內引入下面代碼

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

html中的canvas標簽必須寫在excanvas初始方法之後,即:canvas必須在excanvas初始完成後生成,因此最好把excanvas.js引入到<head>內


解決低版本IE關於html5新特性的兼容性問題html5shiv.js和Respond.js