CSS 中两个相同颜色背景视图间为何出现白线？

Question

<view class="body" style="box-sizing: border-box;padding: 0;margin: 0px;border: none;font-size:0;">
  <view style="height: 30%;background-color: #1E7AFF;z-index: 9999;font-size:0;">
  </view>
  <view style="height: 30%;background-color: #1E7AFF;z-index: 9999;font-size:0;">
  </view>
</view>

为什么中间会有白色线这是我的css

.body {
  height: 100vh;
  
}

已经把内外边距去了, border 也是 none 为什么还有白线, 一样颜色的原因吗

Answer 1

所以为啥不放到 .body 上面的作背景色呢？

另外就是，可能是空白字符串导致的问题，可以尝试这样调整

<view style="height: 30%;background-color: #1E7AFF;z-index: 9999;font-size:0;">
这里是内容
</view><view style="height: 30%;background-color: #1E7AFF;z-index: 9999;font-size:0;">
这里是内容
</view>

或者这样调整 CSS

.body {
  font-size: 0;
}

---

也有可能是因为半像素的问题，可以考虑换分辨率的查看，后者拖动一下窗口位置看看是不是就没有这个情况了。
参考这个问答 👉 css 定位 溢出隐藏 边框和内容之前出现 缝隙？

Answer 2

我用你的代码试了，没有白线，试试真机