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

左右排列，上下居中

flex

flex

flex

上下排列，左右居中

flex

flex

flex

左右排列，元素为input或button

button

在position:fixed的这些情况下，需要使用冒泡的方式才能触发绑定的事件