儿童重叠父母边界/父母和孩子之间的空白在不同的缩放级别

Question

这是我查询的小提琴 - https://jsfiddle.net/a0notdj9/1/

＆＃13;

＆＃13;

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.c {
  display: flex;
  border: 3px solid black;
  align-items: center;
  height: 3rem;
}

.a {
  padding-right: 30px;
}

.b {
  align-self: stretch;
}

.b label {
  display: block;
  height: 100%;
  background: red;
  position: relative;
}

input {
  opacity: 0;
  position: absolute;
}

＆＃13;

<div class="c">
  <div class="a">Text goes here</div>
  <div class="b">
    <label>Option</label>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在Windows 10上，如果我在Chrome上将缩放级别设置为80％，即使没有填充，我也会在父级和子级div之间显示空格。 Edge也是如此，80％也是如此。你可以看到下面的截图：

边：

铬：

Firefox似乎在我尝试的所有缩放级别中都处理得好：

同样，容器div的子节点在某些缩放级别与父边框重叠。下面给出了150％缩放的Chrome视口裁剪，您可以注意到子视图在父级底部边框上的轻微重叠。这有时非常重要：

我不确定我是做错了什么，或者这是不是一个错误，而且它也很烦人。我想知道是否有办法解决这个问题，并使其在不同浏览器中的工作方式相同。