IOS上border的1px处理
2023-10-31 本文已影响0人
Asuler
前提条件:
iphone 13promax，支付宝小程序里
给这个矩形加border时，发现右侧的border被吞了一半，明显变细了
原因:
当父元素的高度为奇数，容易出现上下边框缺失，同理宽度为奇数，容易出现左右边框缺失
所以推断应该是渲染的物理像素点不够分配，刚好差一个像素点
解决:
网上有一些方案是用伪元素模拟边框效果，或者是用transform 0.5来处理。
这些方案稍微有点麻烦，还有一种简单粗暴的方案
这个容器宽度从100% => calc(100% - 1px)， 宽度上减1px即可
image.png
