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

Inconstant gap between border and content

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

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

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