zoukankan      html  css  js  c++  java
  • 解决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- */
                 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;
                 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;
                 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- */
                 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>
  • 相关阅读:
    windows内核函数1
    驱动程序中获取当前进程的进程名的方法
    vs2008+WDK7600驱动开发环境配置
    P2P之UDP穿透NAT的原理与实现之我见
    设计模式-工厂模式
    C++解析ini文件_转载
    利用sort和lambda表达式对vector中的pair进行排序
    C++ 获取目录下具有指定后缀名的所有文件名_windows
    深度学习提取得到的特征值进行特征值相似度比对
    C/C++从路径字符串中获取文件名
  • 原文地址:https://www.cnblogs.com/haoxl/p/5943394.html
Copyright © 2011-2022 走看看