收藏
回答

小程序界面:border 定位和显示在真机上错乱

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug cover-view 客户端 6.6.6 2.1.1

先描述一下问题现象:

用cover-view 通过border 边的样式设置了四个直角,

在真机ios 版本 iphone6plus上: 只能显示两个,并且四个角变成了四个框,也就是说border设置的另外两个边隐藏这个效果在真机上失效了!

在真机Levnovo PB2-690N 上:所有界面都不显示....


在模拟器上显示都正常,真机上级面目全非。


下面上关键代码:

wxml:

<cover-view class='corner corner-tleft'></cover-view>

<cover-view class='corner corner-tright'></cover-view>

<cover-view class='corner corner-bleft'></cover-view>

<cover-view class='corner corner-bright'></cover-view>


wxss:


/*黄色角标样式*/

.corner{

width: 25rpx;

height: 25rpx;

border: 6rpx;

border-style: solid;

border-color: #FF9800;

position: fixed;

}

.corner-tleft{

border-bottom: 0;

border-right: 0;

top:9.6%;

left:7.5%;

z-index: 10;

}

.corner-tright{

border-bottom: 0;

border-left: 0;

top:9.6%;

right:7.5%;

z-index: 11;

}

.corner-bleft{

border-top: 0;

border-right: 0;

top:78%;

left:7.5%;

z-index: 12;

}

.corner-bright{

border-top: 0;

border-left: 0;

top:78%;

right:7.5%;

z-index: 13;

}


上问题图:

模拟器上正确的布局是这样:

┏     ┓


┗    

真机上错误的布局变成了:


🀆    🀆


求各位大神指点! 感谢






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

1 个回答

  • 木子吻雨叚
    木子吻雨叚
    2018-07-12



    2018-07-12
    有用 1
    回复 1
    • 兔僧 Davina
      兔僧 Davina
      2018-07-12

      感谢~~  

      有种想哭的节奏....

      2018-07-12
      回复
登录 后发表内容