解决UC浏览器或微信浏览器上flex兼容问题

在UC浏览器上使用display:flex;时会不起作用，要加上兼容性写法，如下

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;

使用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;才能起作用。

以下为小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Demo for flex on uc</title>
    <style type="text/css">
        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>
</head>
<body>

<h2>左右排列，上下居中</h2>
<div class="demo1">
    <div>flex</div>
    <div>flex</div>
    <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>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>
</body>
</html>

 

posted @ 2016-10-09 18:48  haoxl  阅读(4549)  评论(0)  编辑  收藏  举报
转载请注明出处，否则追究法律责任