公告列表
公告列表
收藏
回答

border 1rpx不能正常显示

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小程序 Bug iOS ios12 iphone7plus 6.7.4

效果，如下图所示。

通过remote dug发现在在ios上，border:1rpx 被渲染为 0.5px。

ios12上部分border显示不正常，安卓ok。



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

6 个回答

  • sheng
    sheng
    2019-01-15

    1rpx的border, 在ios上会粗细不均，建议1rpx的边框，自己绘制吧


    类似这样：


    <view style='width: 98rpx; height: 40rpx; color: white; font-size: 18rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box;  position: relative;'>
       活动说明
       <view class='border'></view> <!-- 这个才是边框 -->
    </view>


    .border::after { 
      content: '';
      position: absolute;  /* 把父视图设置为relative，方便定位*/
      top: 0;
      left: 0;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      transform-origin: 0 0;
      box-sizing: border-box;
      border-radius: 40rpx;
      border: 2rpx solid #fff;
    }


    利用after伪元素，生成宽高是200%、边框是2rpx的一个视图，通过缩放0.5倍，获得一个和父视图边框一样的边框，可以把2rpx的边框缩为1rpx的边框，在ios上也能保证粗细一致。



    2019-01-15
    有用 2
    回复 1
    • #.o0OfF ~ lbb
      #.o0OfF ~ lbb
      2019-01-16

      已经用postscc相关插件解决了

      2019-01-16
      赞
      回复
  • 衬衫
    衬衫
    2019-01-08

    +1

    2019-01-08
    有用 1
    回复
  • #.o0OfF ~ lbb
    #.o0OfF ~ lbb
    2018-12-22

    来个人回答一下嘛

    2018-12-22
    有用 1
    回复
  • 谜
    谜
    2023-03-21
    transform: rotateZ(360deg);
    2023-03-21
    有用
    回复
  • 原来我是船长
    原来我是船长
    2018-12-25

    父容器宽度除以2，得出的值是偶数或偶数.5，就会出现这个bug;例如父容器宽度是200rpx，就设成202rpx试一下，这是在ios上会出现的bug;

    2018-12-25
    有用
    回复 1
    • #.o0OfF ~ lbb
      #.o0OfF ~ lbb
      2018-12-25

      我搜到的资料说ios9以上好像已经修复了border .5px渲染为0的问题，我也不太确定。

      2018-12-25
      赞
      回复
  • 兔子爱吃胡萝卜
    兔子爱吃胡萝卜
    2018-12-24

    遇到同样问题，请问解决了吗？

    2018-12-24
    有用
    回复 3
    • #.o0OfF ~ lbb
      #.o0OfF ~ lbb
      2018-12-25

      改写为1px,粗就粗一点吧，不然只能加postcss插件做处理了

      2018-12-25
      赞
      回复
    • 兔子爱吃胡萝卜
      兔子爱吃胡萝卜
      2018-12-25

      多谢！  我遇到的是左侧不显示，加了个margin-left:1rpx  在ios9.x显示正常了，算是临时解决了

      2018-12-25
      赞
      回复
    • #.o0OfF ~ lbb
      #.o0OfF ~ lbb
      2018-12-29回复兔子爱吃胡萝卜

      1rpx实际被解析为.5px，应该ios平台的问题。加margin-left:1rpx不是解决的最好的办法。。emmmm

      2018-12-29
      赞
      回复
请 登录 后发表内容
相关问题
相关文档