低版本IE兼容 H5+CSS3 方案


【主要是針對ie6 7 8對支持和讓老瀏覽器支持html5+css3的一些js腳本】

 

html5shiv.js             

// 讓IE8及耕地版本的IE識別section,article,nav等html5元素

cdn地址:

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>

 

注意:都要初始化新標簽的CSS.因為HTML5在默認情況下表現為內聯元素,對這些元素進行布局我們需要利用CSS手工把它們轉為塊狀元素方便布局

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

 

但是如果ie6/7/8 禁用腳本的用戶,那么就變成了無樣式的"白板"網頁,我們該怎么解決呢?

我們可以參照facebook的做法,即引導用戶進入帶有noscript標識的 “/?_fb_noscript=1”頁面,用 html4 標簽替換 html5 標簽,這要比為了保持兼容性而寫大量 hack 的做法更輕便一些。

 

selectivizr(www.selectivizr.com)              

// 讓IE6/7/8支持 ::first-child等高級css選擇符

cdn地址:

<script src="https://cdn.bootcss.com/selectivizr/1.0.2/selectivizr-min.js"></script>

 

IE9.js(http://www.9416.cn/html/support/254.html)              

// 修復從IE6-IE9的很多bug和缺損功能

 

CSS3Pie(www.css3pie.com)              

// 讓IE6-IE9支持圓角,背景漸變,邊框圖片,盒子陰影,RGBa顏色可視化的css3功能

cdn地址:

<script src="https://cdn.bootcss.com/css3pie/2.0beta1/PIE_IE9.js"></script>

 

Respond.js(www.github.com/scottjehl/respond)              

// 讓舊版瀏覽器支持媒體查詢

cdn地址:

<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

 

 

-prefix-free(lea.verou.me/projects)              

// 為需要廠商前綴的css3聲明添加前綴

cdn地址:

<script src="https://cdn.bootcss.com/prefixfree/1.0.7/prefixfree.min.js"></script>

 

 

-borderBoxModel.js(www.github.com/albertogasparin/borderBoxModel              

// 讓IE6和IE7支持CSS3的box-sizing屬性

 

基於CSS3 flexbox規范的網格樣式

<link href="https://cdn.bootcss.com/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet">

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM