小程序css中border-style设定开发端与真机预览显示效果不一致？

引言

我又又又遇到了这个问题…小程序中设定的css样式开发端与真机显示的效果不一样，在小白眼里这样很崩溃的 QAQ，于是我又又又请教了资深的大佬，在这里尤其感谢小程序开放社区undefined用户，为我结决了困扰。！！！！膜拜大佬！！！！

代码片段

<view class='basicScancodeGet'>
  <view class='bk-scancode'>
    <cover-view class='scancodeText'>
      二维码
    </cover-view>
  </view>
</view>

page{
     
  background-color: #1E1E1E;
  width:100%;
  height:100%;
}
.basicScancodeGet{
     
  padding-top:50px;
}
.bk-scancode{
     
  background-color: #323232;
}
.scancodeText{
     
  border: 10px #FA8072;
  border-style: none none solid none;
  color:  #F5F5F5;
  line-height: 2;
  padding-left:30px;
  box-sizing: border-box;
}

预览对比图

开发端：

解决方案

从大佬的回答来看应该是使用了某个控制台的监控板块，于是我也试了一下：真的有收获！

于是在真机调试中发现了猫腻！真机调试中多出来了一个cover-view，其中visibility成员的属性为hidden，看这个名字我就知道什么东西被隐藏了！我翻阅了一下图书：

visibility
The visibility property can hide an element without removing the space
it occupies by setting the property’s value to hidden.
visibility (block) : inherit | visible | hidden | collapse
The collapse value is meant to be used only on certain table elements:
rows (>), columns (>), column groups (>), and row
groups (>, >, and >). According to specification,
collapse should remove the hidden element (same as display: none)
and make the space available for other elements to claim. Regrettably,
not all major browsers follow the specification for this value. Setting the
display property to none results in more consistent browser behavior and
should be used instead.

嗷嗷嗷！那我应该做的是把visibility中的hidden换成visible就行了！

解决方案

在被隐藏了的板块所在的class中添加成员visibility:visible;

.scancodeText{
     
  border: 10px #FA8072;
  border-style: none none solid none;
  color:	#F5F5F5;
  line-height: 2;
  visibility: visible;
  padding-left:30px;
  box-sizing: border-box;
}