收藏
回答

小程序页面渲染出现一条细线

小程序页面渲染多了一条细线


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 为创建时默认


然后,在开发者工具显示正常,但是手机预览时却多了一条灰色线




放大看仔细



回答关注问题邀请回答
收藏

4 个回答

  • WANGZHENG
    WANGZHENG
    2019-07-26

    那个放大镜 是什么软件截出来的

    2019-07-26
    有用
    回复 1
  • Jon
    Jon
    2018-05-23

    我也有这个问题relative有条线, 不是 relative 这个线条就会消失。

    2018-05-23
    有用
    回复
  • 连胜
    连胜
    2018-01-22

    建议你查看一下父元素的CSS,是否设置了box-shadow~

    如果没有设置,只是部分手机上有这问题,建议你把伪元素的大小设置大2rxp,然后改变right值,让这个半圈能盖住那条白线~

    2018-01-22
    有用
    回复
  • Jake
    Jake
    2018-01-22

    我的安卓和苹果都没有这个线啊。是不是你的手机问题。你再检查一下是不是你页面设置什么东西。

    建议你写一个新的页面调试看看

    2018-01-22
    有用
    回复
登录 后发表内容