Chrome与Firefox的字体基线不同

Question

我整天都在阅读有关CSS字体基线的文章，并提出了一个非常简单的示例，该示例在Chrome与Firefox中产生不同的基线：codepen.io

html {
  font-size: 10px;
}
body {
  margin: 0;
}
.text {
  background-color: orange;
  font-size: 10rem;
  height: 10rem;
  line-height: 10rem;
}

<div class="text">
  My text &#220;
</div>

Chrome版本53.0.2785.116（64位）：

Firefox 45.3.0：

我正在使用Mac OS 10.11.6。

这是一些与CSS无法很好解决的固有浏览器差异吗？或者我错过了什么？