IOS低版本遇到了坑不知道你遇到了沒

    拿着項目給客戶測試，客戶那邊三我的倆人水果手機是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：

按 Ctrl+C 複製代碼

/* 父元素-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。