Webkit增加了额外的填充，而Firefox却没有

Question

以下HTML和CSS在Webkit和Firefox上的呈现方式不同。 Webkit在文本顶部和边框之间显示了额外的1-2像素填充。

<div id="R">HELLO WORLD</div>

#R {
  border: thin solid blue;
  display: inline-block;
  font-size: 20px;
  font-family: Helvetica;
  color: red;
  padding: 0;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
  vertical-align: baseline;
}

https://jsfiddle.net/p0wh01p4/21/

它来自哪里以及如何修复它？

编辑：下面是一个半透明的Firefox屏幕截图，它叠加在Chrome屏幕截图上以显示差异。它们在垂直方向上排成一行并且水平地相对于彼此略微移动。