CSS-微信小程序-部分ios机型按钮border丢失

详情参考：https://timor419.github.io/2020/10/09/CSS-border/

问题：

部分ios机型按钮border丢失，部分手机浏览器不能识别0.5px，当做0处理。

在iPhone 11 Pro Max上显示效果如下图

详情参考：https://timor419.github.io/2020/10/09/CSS-border/#more

产生这样的代码如下：

WXML

<view class="second-time flex-row>
文案
</view>

WXSS

    .second-time {
      width: 162rpx;
      height: 30rpx;
      line-height: 30rpx;
      margin-left: 6rpx;
      padding-right: 5rpx;
      border-radius: 6rpx;
      border: 1rpx solid #fd3d04;
      box-sizing: border-box;
      }

分析

部分ios机型按钮border丢失，部分手机浏览器不能识别0.5px，当做0处理，从而出现该bug。

解决方案

方案1.

border用background-image替代，即用切一个1px的背景图当容器的边框

方案2.

把原先元素的 border 去掉，增加伪元素绝对定位+transform对边框缩放

  .second-time {
    width: 162rpx;
    height: 30rpx;
    line-height: 30rpx;
    margin-left: 6rpx;
    padding-right: 5rpx;
    box-sizing: border-box;
    position: relative;
    border: none;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1rpx solid #fd3d04;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
      border-radius: 6rpx;
    }
  }

方案3.

补充像素单位

wxml增加space的view如下：

<view class='space'></view>
<view class="second-time flex-row>
文案
</view>

wxss中增加space类如下：

  .space {
    width: 100%;
    height: 1rpx;
    float: top;
  }

修改之后在iPhone 11 Pro Max上显示效果如下图

------------- The End -------------

许可协议: 转载请保留原文链接及作者。