我遇到了一个简单的容器与边界的问题：容器边框和内容之间的任何边缘上都会随机出现一个小间隙，当内容有背景时，这个间隙就可以看到。下面的代码片段可以非常快速地总结一下：

.container {
  width: 100px;
  height: 50px;
  border: 2px solid black;
  background: yellow;
  margin-bottom: 5px;
}

.leftBox {
  width: 30%;
  height: 100%;
  background: red;
}

<div class="container">
  <div class="leftBox"></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>
<div class="container">
  <div class="leftBox"/></div>
</div>

这里是我用Chrome得到的结果的图片，以防问题是浏览器相关的：

知道为什么我会得到这个结果吗？有什么解决办法吗？谢谢
编辑：我发现我用任何浏览器都能得到同样的结果，但只是在我的笔记本电脑屏幕上：如果我在另一个设备上显示网页，就没有更多的缝隙了！这是什么巫术？
编辑：问题是由Windows缩放引起的，因此与我写的css无关。见下面的答案。