关于移动端页面兼容性的问题

Question

现在移动端页面在Android4.3上会有哪些不兼容的问题？我的页面在vivo Xshot（X710L）Android版本4.3这款机型上会出现页面布局怪异，其它手机上都是正常的，有碰到过的这样的问题么？我是用vue-cli写的项目，今天突然跟我说vivo这个机型上布局怪异，我想测试也没地方测试啊，有这种测试工具

上面是大多数手机的布局，
下面是vivo Xshot（X710L）Android版本4.3这款机型上的问题
以下是html 及css代码

        <div class="list-wrapper">
            <ul class="clearfix">
                    <li class="list-item"  @click="listdetail(item)" v-for="(item,index) in mylist">
                        <img :src="item.thumb_url" alt="">
                        <span class="company-name">{{item.wx_name}}</span>
                        <!-- <span v-show="false">浏览量:{{item.view_int}}</span> -->
                        <span>浏览量:{{item.view_int|judge}}</span>
                        <div class="hongbao" v-show=item.is_fensibao></div>               
                    </li>
                   
           </ul>
        </div>
     .list-item{
        float: left;
        list-style:none;
        text-align: center;
        width:25%;
        margin-bottom: 10px;
        position: relative;
    }
    .list-item img{
        width: 2.0rem;
        height: 2.0rem;
        text-align:center;
        border-radius: 5px;
    }
    .list-item span{
        font-size: 10px;
        display: block;
        color:rgb(148,148,148);
        -webkit-transform:scale(0.84,0.84);    
    }
    .list-item .company-name{
    width: 100%;
    font-size: 10px;
    display: -webkit-box;
    /* autoprefixer: off*/
    -webkit-box-orient:vertical;
    /* autoprefixer: on*/
    -webkit-line-clamp:2;
    height: 30px;
    line-height: 15px;
    color: #727171;
    text-align: center;
    overflow: overlay;
    
    }
                

Answer 1

感觉是css上面的问题。用的是rem布局还是什么的？我觉得lz还是需要再给一点代码比较好。。

Answer 2

问题比较奇怪，，换用display:flex布局呢

Answer 3

有两个问题：
1.上面4个图片叠加的问题是因为图片宽度超出外围box导致的，设定下图片宽度自适应。
2.下面的浮动错位是因为上面没有清除浮动，上面清除下浮动就行了。

Answer 4

可能是编写rem的js代码里面不兼容

Answer 5

看不出，可能是flexible方案有点问题吧