边框和内容之间的差距不断

Question

我在使用带边框的简单容器时遇到问题：在容器边框和内容之间的任何边缘上随机出现一个小间隙，当此内容具有背景时可见。这段代码总结得非常快：

.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 无关。请参阅下面的答案。

Answer 1

刚刚发现问题出在哪里：两个屏幕，相同的分辨率，不同的结果。屏幕之间的唯一区别是我的笔记本电脑屏幕上的 Windows 比例设置为 125%。当我将其重置为 100% 时，问题就消失了。奇怪的行为！我想没有解决方法，只会让激活 Windows 缩放的人失望......