在开发微信小程序商品列表时，遇到商品标签如【优惠券】、【包邮】的0.5px边框在部分设备（如iPhone6）上显示不全的问题。通过将边框宽度改为1rpx，虽然解决了显示问题，但不符合设计稿要求。经研究发现，此问题可能与微信小程序的rpx像素转换机制有关。参考他人博客，采用在标签前添加1rpx竖线的方法临时修复了问题，但具体原因仍待深入理解。
最近写小程序的商品列表时，商品卡片里需要展示商品的【优惠券】或者【包邮】标签。
设计稿里，标签的边框是0.5px， 在微信小程序里就是1rpx的宽度。
测试的时候发现在一部iphone6手机上，【包邮】的右边框展示不完整，如下图：
测试数据没有商品图片，忽略忽略，看【包邮】标签就好 😁
包邮标签的样式写在css里，
border: 1rpx solid #FF4444;
border-width改成2rpx（即1px）是可以正常展示的，只不过边框变宽了，但是要按照稿子来啊*(审美缺失部的名头可是不可忽视的😂)*
思来想去：
感觉可能跟微信小程序的rpx像素转换机制有关
最后解决方法是：
按照大佬博客 htt
最低0.47元/天 解锁文章
扫一扫
1810
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
