小程序页面渲染多了一条细线
test.wxml
<view class="ui-coupon"> <view class="ui-coupon-container"> <view class="ui-coupon-header"><view class="ui-coupon-row">文本一</view></view> <view class="ui-coupon-body"><view class="ui-coupon-row">文本二</view></view> </view></view> |
test.wxss
.ui-coupon { color: #333; padding: 16px; min-height: 100vh; background-color: #63b359;}.ui-coupon-container { border: 0; outline: 0; overflow: hidden; border-radius: 8px; background-color: #fff;}.ui-coupon-header { position: relative;}.ui-coupon-header:before,.ui-coupon-header:after { display: block; content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; bottom: -8px; background-color: #63b359;}.ui-coupon-header:before { left: -8px;}.ui-coupon-header:after { right: -8px;}.ui-coupon-row { color: #333; line-height: 24px; padding: 12px 25px; font-size: 16px; position: relative;}.ui-coupon-header .ui-coupon-row:before,.ui-coupon-row + .ui-coupon-row:before { position: absolute; top: 0; left: 0; right: 0; height: 0; display: block; content: ''; border-top: 1px solid #d9d9d9; -webkit-transform: scaleY(.5); transform: scaleY(.5);}.ui-coupon-header .ui-coupon-row:before { top: auto; bottom: 0; left: 16px; right: 16px; border-top-style: dashed;} |
test.js 与 test.json 为创建时默认
然后，在开发者工具显示正常，但是手机预览时却多了一条灰色线
放大看仔细
我也有这个问题relative有条线， 不是 relative 这个线条就会消失。![]()
那个放大镜 是什么软件截出来的
建议你查看一下父元素的CSS，是否设置了box-shadow~
如果没有设置，只是部分手机上有这问题，建议你把伪元素的大小设置大2rxp，然后改变right值，让这个半圈能盖住那条白线~
我的安卓和苹果都没有这个线啊。是不是你的手机问题。你再检查一下是不是你页面设置什么东西。
建议你写一个新的页面调试看看