问题如下图所示,瀑布流程中每个项目的头像使用相同的css样式,但有时头像不在中心(如最后一项)。只有Android浏览器有这个问题,IOS很好。
HTML和CSS如下:
<div class="m-headimg-wrapper ">
<img class="m-headimg-img" src="xxxx">
</div>
.m-headimg-wrapper {
position: relative;
display: flex;
width: 0.28rem;
height: 0.28rem;
justify-content: center;
align-items: center;
margin-left: 0.1rem;
border-radius: 0.28rem;
overflow: hidden;
&:after {
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 0.56rem;
height: 0.56rem;
transform: scale(0.5) translate(-50%, -50%);
border: 1px solid #00bcd4;
border-radius: 0.56rem;
}
.m-headimg-img {
width: 0.26rem;
height: 0.26rem;
border: 1px solid #fff;
border-radius: 0.26rem;
}
}
答案 0 :(得分:0)
问题已经解决,因为从rem转换的px是十进制数。直接使用px不会导致这个问题,但是仍然很奇怪为什么只有部分项目存在小数问题。