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

最新推荐文章于 2024-06-24 09:40:35 发布

嫣嫣细语

最新推荐文章于 2024-06-24 09:40:35 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序前端 javascript 文章标签：微信小程序小程序

本文链接：https://blog.youkuaiyun.com/aaa123aaasqw/article/details/135927586

javascript 同时被 3 个专栏收录

82 篇文章

订阅专栏

微信小程序

79 篇文章

订阅专栏

前端

77 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序在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;
}