display: inline-block在iOS10.x的系统

2018-09-29  本文已影响0人  会撸码的小马

背景:
我有个页面,需要一行显示3个
预期效果是这样:


expect

在iOS10.x上实际效果是这样:

error

原因:
display:inline-block,是基于baseline对齐的,大小不一会导致上下不齐,所以设置的时候最好设置vertical-align属性。
所以我在item的样式中添加了vertical-align:top,就完美解决了

.list {
        overflow: hidden;
        text-align: left;
        font-size: 0;

        .item {
            display: inline-block;
            background: #fff;
            width: 50px;//自己计算的宽高
            height: 50px;// 自己计算的宽高
            background-size: cover;
            background-position: center;
            margin-top: 4px;/* no */
            margin-left: 4px;/* no */
            border-radius: 1px;/* no */
            overflow: hidden;
            vertical-align: top;
        }
    }
上一篇下一篇

猜你喜欢

热点阅读