微信小程序 1rpx border ios 真机显示不全
问题描述
在微信小程序的原生页面,ios 真机上 1rpx border 会出现个别边显示不全的情况;
解决方案
这里先放上问题直通车:微信小程序1rpx border ios真机显示不全问题分析及解决方案
经过分析:当标签的父容器宽度(单位rpx)÷2的值为偶数或偶数.5的时候会出现该bug,那么我们可以推到出用200.5*2=401,302*2=604等等都会重现这个bug;
所以解决方案为:
那么解决方案就来了:
1)第一种方式是设置标签父容器的宽度到无bug值,即(奇数或奇.5)*2,例如281*2rpx,281.5*2rpx可以解决;
2)第二种方式是补充像素单位:
步骤1中wxml增加space的view后如下:
<view class='label-con'>
<view class='space'></view>
<view class='label'>中国移动</view>
<view class='label'>苏宁</view>
<view class='label'>阿里巴巴</view>
<view class='label'>华为</view>
</view>
步骤1中wxss中增加space类为:
.space{
width: 1rpx;
height: 100%;
float: left;
}
以上两种方式即可解决该问题。
具体原因和解决方案请点击上面直通车