在Firefox中避免使用小数像素的行高不一致的解决方法

Question

情况：我想在固定高度的框内显示一些文字（或字体图标）。我可以假设它总是适合一行，所以可以简单地使用行高来控制居中。

这完美地运作并且在彼此之下显示两个这样的框：

<div class="box">a</div>
<div class="box">a</div>

.box {line-height:32px;width:32px;text-align:center;background:red;margin-bottom:5px;font-family:Arial,Helvetica,sans-serif;}

https://jsfiddle.net/zj55racg/1/

现在，将5px垂直边距更改为1.5px：

https://jsfiddle.net/jwg2ok3f/

在Chrome中，我得到了同样漂亮的结果。然而，在Firefox中，第二个框的文本相对于红色框明显较低，并且看起来不是很好。

现在，虽然您永远不会在CSS中直接使用小数像素边距，但在整个页面中始终存在具有百分比行高度或响应图像等的文本，这会导致引入小数像素。这意味着整个页面中按钮的一半看起来不错;另一半看起来很糟糕 - 差异非常明显。

有什么方法可以解决渲染问题吗？

我看到的其他人无法复制的图像 - 第二个a是红色框中比第一个更低的整个像素。