Div中的CSS居中位置在FF / Chrome中有所不同

Question

我有一个在其父级中水平和垂直居中的跨度，带有以下CSS：

.cal-day {
  font-size: 1.8em;
  top: 50%;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="calendar-button">
  <a href="#">
    <span class="icon-calendar"></span>
    <span class="cal-day">21</span>
  </a>
</div>

（。icon-calendar是icomoon-font，position is relative to make parent div创建空间）

适用于Chrome和Safari。在Firefox中，容器是从顶部开始的几个像素（我附加了一个图像）。

我想，这是在FF / Chrome中呈现不同的字体......但是我怎样才能让它们同样渲染呢？

有什么想法吗？