display: inline-block在iOS10.x的系统中,导致行间距和预期不符合的问题

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


display: inline-block在iOS10.x的系统中,导致行间距和预期不符合的问题_第1张图片
expect

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

display: inline-block在iOS10.x的系统中,导致行间距和预期不符合的问题_第2张图片
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;
        }
    }

你可能感兴趣的:(display: inline-block在iOS10.x的系统中,导致行间距和预期不符合的问题)