在UC瀏覽器上使用display:flex;時會不起作用巧颈，要加上兼容性寫法作儿，
如下
/* OLD - iOS 6-, Safari 3.1-6 */
display: -webkit-box;? ? ?
/* OLD - Firefox 19- (buggy but mostly works) */
display: -moz-box;? ? ? ?
/* TWEENER - IE 10 */
display: -ms-flexbox;? ? ?
/* NEW - Chrome */
display: -webkit-flex; ?
display: flex;
使用flex:1;時也要添加如下兼容性寫法：-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:1的元素為input或button時，只用flex:1;是不起作用的娶吞，還要加上display:block;才能起作用。以下為小案例復(fù)制代碼
<style>
html,body{
padding: 0;
margin: 0;
}
.demo1{
background-color: yellow;
text-align: center;
height: 80px;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
/* for uc */
display: -webkit-box;
-webkit-box-align: center;
}
.demo1>div{
background-color: green;
margin: 2px;
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
.demo2{
background-color: yellow;
width: 80px;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
align-items: center;
/* for uc */
display: -webkit-box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
-webkit-box-align: center;
}
.demo2>div{
background-color: green;
width: 40px;
margin: 2px;
-webkit-flex: 1;
flex: 1;
/* for uc */
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}
.demo3{
text-align: center;
padding: 0 6px;
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;
}
.demo3 .btn{
-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+ */
display:block;
height: 40px;
color:#fff;
text-align: center;
line-height: 40px;
cursor: pointer;
font-size: 17px;
font-weight: 700;
margin-top:0px;
margin-bottom:20px;
font-family: "方正正中黑簡體", "Microsoft YaHei", "sans-serif";
-webkit-appearance : none ;? /*解決iphone safari上的圓角問題*/
}
.prev {
background-color: #FEBC21;
margin-right:6px;
}
.next {
background-color: #FE9121;
}
</style>
<h2>左右排列，上下居中</h2>
<div class="demo1">
<div>flex</div>
<div>flex</div>
<div>flex</div>
</div>
<h2>上下排列吏奸，左右居中</h2>
<div class="demo2">
<div>flex</div>
<div>flex</div>
<div>flex</div>
</div>
<h2>左右排列陶耍，元素為input或button</h2>
<div class="demo3">
<button class="btn prev">button</button>
<input type="button" class="btn next" id="btn" value="input">
</div>
在position:fixed的這些情況下，需要使用冒泡的方式才能觸發(fā)綁定的事件
