微信小程序ios下，border显示不全兼容问题解决

最新推荐文章于 2025-06-05 00:18:56 发布

原创最新推荐文章于 2025-06-05 00:18:56 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

javascript 同时被 3 个专栏收录

82 篇文章

订阅专栏

微信小程序

79 篇文章

订阅专栏

前端

77 篇文章

订阅专栏

文章讲述了在iOS小程序开发中，当border设置小于1px时可能出现显示不全的问题，通过添加`::after`或`::before`伪类并使用绝对定位，可以确保边框完整显示。作者提供了`.d_card_line1_tag`类的样式示例来展示解决方案。

小程序在ios系统中，如果border小于1px的情况下，border就可能显示不全(可能少了上下左右任意一边)

只需要加一个::after或::before伪类，使用绝对定位定在原来元素上边就不会产生问题了！

.d_card_line1_tag {
  padding: 1rpx 14rpx;
  /* border: 1px solid #333; */
  font-size: 18rpx;
  position: relative;
}
.d_card_line1_tag::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%,-50%);
  border: 0.5px solid #333;
  border-radius: 4rpx;
}