Chrome渲染元素的边框太大。为什么？

Question

我有一个带有div的网页，完全填满了另一个div。

<div id="outer">
  <div id="inner"/>
</div>

风格如下：

#outer {
  background: blue;
  border: 1px solid red;
  height: 44px;
  width: 44px;
}
#inner {
  background: yellow;
  border: 1px solid green;
  height: 42px;
  width: 42px;
}

随时查看相应的codepen。

在Firefox中，这很好。在Chrome中，外部div的背景显示，因为它渲染得太大。此外，边界太远了。这是效果图。

查看Chrome（左侧）底部和右侧的额外蓝色边框，这是Firefox不存在的（右侧）。为什么是这样？我该如何预防呢？ （我猜测它与Chrome在缩放时舍入像素有关？Codepen是否缩放其输出或其他东西？）