UC浏览器的兼容问题

在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;才能起作用。以下为小案例复制代码

<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的这些情况下，需要使用冒泡的方式才能触发绑定的事件