拿着項目給客戶測試，客戶那邊三個人倆人水果手機是ios8以下版本，結果導致｀｀｀（恭喜，坑出現！）總不能說老總！“您把版本升級到ios9 吧！😄”
首先是flex，我想應該好多人都知道這個。就像之前的position：fixed；一樣。作為新人來講，遇到這些是好的，在脫坑中成長，雖說都是被前輩們踩過的坑。
flex：This value causes an element to generate a block-level flex container box.
此值會導致一個元素生成一個塊級框flex容器。
一.W3C各個版本的flex
2009 version
標志：display: box; or a property that is box-{*} (eg. box-pack)
2011 version
標志：display: flexbox; or the flex() function or flex-pack property
2012 version
標志：display: flex/inline-flex; and flex-{*} properties
2014 version
新增了對flex項z-index的規定
2015 W3C Editor’s Draft
沒有大的改動
P.S.注意2015的是W3C Editor’s Draft，只是個草案，還處於修修改改的階段，還沒有征集瀏覽器供應商的意見
瀏覽器兼容的flex語法
上面分析得很清楚，針對需要兼容的目標使用對應版本的語法就好了，下面給出常用的布局代碼：
/* 子元素-平均分欄 */
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 父元素-橫向排列（主軸） */
.flex-h {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: horizontal;
/* 12版 */
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
-o-flex-direction: row;
flex-direction: row;
}
/* 父元素-橫向換行 */
.flex-hw {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-水平居中（主軸是橫向才生效） */
.flex-hc {
/* 09版 */
-webkit-box-pack: center;
/* 12版 */
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
/* 其它取值如下：
align-items 主軸原點方向對齊
flex-end 主軸延伸方向對齊
space-between 等間距排列，首尾不留白
space-around 等間距排列，首尾留白
*/
}
/* 父元素-縱向排列（主軸） */
.flex-v {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
/* 09版 */
-webkit-box-orient: vertical;
/* 12版 */
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
/* 父元素-縱向換行 */
.flex-vw {
/* 09版 */
/*-webkit-box-lines: multiple;*/
/* 12版 */
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap: wrap;
}
/* 父元素-豎直居中（主軸是橫向才生效） */
.flex-vc {
/* 09版 */
-webkit-box-align: center;
/* 12版 */
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
}
/* 子元素-顯示在從左向右（從上向下）第1個位置，用於改變源文檔順序顯示 */
.flex-1 {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/* 子元素-顯示在從左向右（從上向下）第2個位置，用於改變源文檔順序顯示 */
.flex-2 {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
為了更好的兼容性，我們需要給容器聲明flex-h/flex-v，而不是一般的flex：
/* 父元素-flex容器 */
.flex {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
注意 ：從測試結果可以發現flex布局會把偽元素當作元素來分配空間（文檔好像有提到給偽元素設置position: fixed/absolute;可以避免這一情況，本文暫未驗證），但我們一般希望偽元素只有裝飾作用，不影響布局，這與我們的預期不一致。所以， 當flex布局中有偽元素時要特別小心，盡可能多地進行瀏覽器兼容性測試，或者改用float布局
轉自：http://www.tuicool.com/articles/Afq6Bzq
http://www.cnblogs.com/mk2016/p/5562994.html
再說下ios8綁定onclick事件點擊之后沒有反應：
頁面是span內部加的圖標 然后綁定click事件，新人的常規想法，但是｀｀｀ 不和正常的語義。
為什么要在span上綁事件呢，用button、a不是更符合語義嗎？
后期注意：
在移動端ios的span div元素不能使用click事件，android的只有div不能綁定click事件，最好用原生的ontouch事件，但是對其他的事件比如focus什么的還是可以用的，其他元素綁定click也沒問題，但是建議在移動端用touch事件取代click事件比較好。
不為方法的方法。
解決的辦法：給span 這個按鈕加個樣式｛cursor:pointer；｝；
span 添加 cursor:pointer 這樣的屬性以告訴內核這元素是按鈕，至於原因，沒別的，就是內核的 bug。