让 firefox 和 chrome 对齐项目：以相同的方式居中文本？

Question

如果我做一个div：

<div class="letter">X</div>

并使用 flexbox “align-items: center” 设置样式，如下所示：

.letter {  
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: white;
  background-color: blue;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

小提琴

在 chrome 上，字母如我所料垂直居中。

但在 Firefox 中，文本下方的空间（对于下行字母？）似乎用于计算居中，文本最终看起来位于中心上方。 （这种差异不会发生在非文本元素上）

有人知道我如何通过 CSS 来显示同一个跨浏览器吗？