html - 边界和内容之间的不固定差距

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 缩放激活的人失望......