Google Chrome 正在向我的输入字段添加 2 像素高度

Question

从互联网上的一些 CSS 重置模式中汲取灵感，我想我应该使用一个规则body {line-height: 1}。目前，这导致了我的<input>和<button>元素计算高度不同的问题，尽管字体值相同。示例JSFiddle。我在 Chrome 中遇到了这个问题。

有人能告诉我 Chrome 中这些额外的 2 个像素是从哪里来的吗？可能还有关于使用的任何建议{line-height: 1}？

body {
  line-height: 1;
  margin: 0;
}

button, input {
  font: inherit;
  padding: 5px;
  width: 50vw;
}

input {
  box-sizing: border-box;
}

#row {
  display: flex;
}

<div id="row">
  <button>
    18px Chrome, 16px FF
  </button>
  <input type="text" value="My font is 18px">
</div>

<div id="column">
  <button>
    My font is 16px
  </button>
  <input type="text" value="18px Chrome, 16px FF">
</div>

编辑： 从Mozilla.org给出了行高的解释。

CSS 的 line-height 属性设置行（例如文本）所使用的空间量。在块级元素上，它指定元素内行框的最小高度。在非替换内联元素上，它指定用于计算行框高度的高度。

例如，使用line-height: 0计算样式如下......

铬合金：

• 按钮line-height: 0; height: 0;
• 输入line-height: 0; height: font-size + ~13-14%;

火狐浏览器：

• 按钮line-height: 0; height: 0;
• 输入line-height: font-size; height: font-size/line-height;

上面演示的示例：JSFiddle。

我不明白 Chrome 和 Firefox 如何都不遵守上面的解释。它们都是内联块，并且计算高度的方式不同。有人可以用更清晰的语言解释 Mozilla 开发者网站上的这句话吗？