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;
}
}