小程序界面:border 定位和显示在真机上错乱
发布于 6 年前 作者 mengjie 20166 次浏览 来自 问答

先描述一下问题现象:

用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;

}

上问题图:

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

┏     ┓

┗    

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


🀆    🀆

求各位大神指点! 感谢

回到顶部