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

问题：

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

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

产生这样的代码如下：

WXML

1
2
3

<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;
}

问题：