收藏
回答

小程序1rpx边框在iOS真机上出现缝隙

API/组件名称 终端类型 微信版本 基础库版本
text 客户端 6.6.1 1.9.1

你想反馈一个 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: 1rpx solid #e4e4e4;
  width: 156rpx;
  line-height: 33px;
  border-radius: 33px;
  text-align: center;
}
.radio-btn:last-child {
   margin-left: 20rpx;
}
.radio-btn-active {
  border-color: #c81528;
  color: #c81528;
}
.feedback-type {
  text-align: center;
  line-height: 83px;
  border-bottom: 1rpx solid #e4e4e4;
}



回答关注问题邀请回答
收藏

4 个回答

  • RainJoy
    RainJoy
    2018-08-13

    1rpx 类似 1rem,在真机上,由于分辨率的原因,或多或少会有显示的问题。

    2018-08-13
    有用
    回复
  • KevyTian
    KevyTian
    2018-05-15

    看看这个/::> https://blog.csdn.net/c5211314963/article/details/80323443

    2018-05-15
    有用
    回复
  • 启封
    启封
    2018-01-20

    我比较疑惑的是这两个按钮只有颜色不一样,现在只有右边的按钮出现了缝隙,而且如果去掉两个按钮之间的间隔,右边的按钮也不会有缝隙,感觉就像是有什么东西盖在了右边按钮上一点点导致了空隙的产生

    最后我改用flex布局,使用justify-content: space-between让两个按钮产生间隔,按钮表现正常

    2018-01-20
    有用
    回复
  • TNT
    TNT
    2018-01-19

    请设置2rpx ,0.5px在某些分辨率低的手机上显示不出来。安卓特别明显。 也可以放大设置, 然后scale 会变得很清晰

    2018-01-19
    有用
    回复
登录 后发表内容