你想反馈一个 Bug 还是 提一个需求? Bug
* Bug 表现是什么?预期表现是什么?
两个按钮分别设置1rpx border,当两个按钮使用margin隔开,或者使用带宽度view分隔时,第二个框在真机(目前测过的机型有iPhone 8Plus,iPhone 6Plus)上会出现很小的一个缝隙,当使用text分隔或者border-width增加或者去除间隙时,这个bug会消失
* 如何复现?
< view class = 'feedback-type' > < text class = 'radio-btn' >投诉</ text > < text class = 'radio-btn radio-btn-active' >表扬</ text > </ view > |
.radio-btn { display : inline- block ; border : 1 rpx solid #e4e4e4 ; width : 156 rpx; line-height : 33px ; border-radius: 33px ; text-align : center ; } .radio-btn:last-child { margin-left : 20 rpx; } .radio-btn-active { border-color : #c81528 ; color : #c81528 ; } .feedback-type { text-align : center ; line-height : 83px ; border-bottom : 1 rpx solid #e4e4e4 ; } |
1rpx 类似 1rem,在真机上,由于分辨率的原因,或多或少会有显示的问题。
看看这个/::> https://blog.csdn.net/c5211314963/article/details/80323443
我比较疑惑的是这两个按钮只有颜色不一样,现在只有右边的按钮出现了缝隙,而且如果去掉两个按钮之间的间隔,右边的按钮也不会有缝隙,感觉就像是有什么东西盖在了右边按钮上一点点导致了空隙的产生
最后我改用flex布局,使用justify-content: space-between让两个按钮产生间隔,按钮表现正常
请设置2rpx ,0.5px在某些分辨率低的手机上显示不出来。安卓特别明显。 也可以放大设置, 然后scale 会变得很清晰