隨著自己寫過的頁面的增多,也遇到了很多CSS相容性的問題。這些相容性問題,都是必然的,因為技術在不斷進步,那麼為了不被淘汰,我們就要做些相容性處理。這篇文章主要介紹了CSS中flex的相容,需要的朋友可以參考借鑒,下面來一起看看吧。
前言
我寫頁面的時候用到過很多的flex布局,覺得非常好用。下面附上一篇不錯的flex布局介紹的文章。
Flex 布局教程想瞭解的可以自己去看看這篇博文,或者自己百度,這裡先部多做介紹,我們主要來說一說flex布局的相容性問題。
why?
大家可能想問了,flex布局為什麼會存在相容性問題啊?
之所以存在相容性問題,是因為技術在不斷的更新,有些舊的瀏覽器只支援舊文法的書寫方式,所以就出現所謂的相容性問題。
what?
那麼新舊版本是什嗎?
flex布局分為舊版本dispaly: box;,過渡版本dispaly: flex box;,以及現在的標準版本display: flex;。所以如果你只是寫新版本的文法形式,是肯定存在相容性問題的。
Android
2.3 開始就支援舊版本 display:-webkit-box;
4.4 開始支援標準版本 display: flex;
IOS
6.1 開始支援舊版本 display:-webkit-box;
7.1 開始支援標準版本display: flex;
PC
ie10開始支援,但是IE10的是-ms形式的。
下面是各個瀏覽器的支援情況
how?
所以我們該如何進行相容性的寫法呢?
盒子的相容性寫法
.box{ display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本文法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本文法: IE 10 */ display: -webkit-flex; /* 新版本文法: Chrome 21+ */ display: flex; /* 新版本文法: Opera 12.1, Firefox 22+ */}
子項目的相容性寫法
.flex1 { -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */}
這種相容寫法不一定起效的。尤其是在底版本安卓系統中。因為什麼呢?因為所有都是向下相容的,所以寫法的順序一定要寫好了才起作用。就是把舊文法寫在底下,個別不相容的移動設定才會識別,哪些是舊的文法,你懂的。那些帶box的一定要寫在最下面即可。
所以上面的相容寫法應該是這樣的才對:
.box{ display: -webkit-flex; /* 新版本文法: Chrome 21+ */ display: flex; /* 新版本文法: Opera 12.1, Firefox 22+ */ display: -webkit-box; /* 老版本文法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本文法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本文法: IE 10 */ }.flex1 { -webkit-flex: 1; /* Chrome */ -ms-flex: 1 /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ -webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ }