解決UC瀏覽器或微信瀏覽器上flex兼容問題

時間 2019-11-18

原文原文鏈接

在UC瀏覽器上使用display:flex;時會不起做用，要加上兼容性寫法，以下css

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;時也要添加以下兼容性寫法：html

-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;才能起做用。web

如下爲小案例瀏覽器

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。