隨着自己寫過的頁面的增多，也遇到了很多CSS兼容性的問題。這些兼容性問題，都是必然的，因為技術在不斷進步，不斷革新，所謂，“后浪推前浪，前浪拍死在沙灘上”，當然我們的技術不能是被拍死在沙灘上，我們還要支持，不支持的話，只能是你這個頁面，這個產品被淘汰。
那么為了不被淘汰，我們就要做些兼容性處理。
我寫頁面的時候用到過很多的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- */
}
---------------------
原文：https://blog.csdn.net/u010130282/article/details/52627661