悬停时文本偏移量为1px，颜色过渡

Question

在this网页上，当您将评分悬停在每个帖子的右侧时，图标将在颜色过渡时向左偏移1px。但是，这只发生在Chrome和Safari中，但不适用于Firefox。

这是一个错误吗？我的代码有问题吗？

图标本身来自字体FontAwesome 当我试图在jsfiddle中重新创建页面的这一部分时，错误没有发生。

这就是我所看到的：

Answer 1

我确实在Chrome中看到了这个问题，但在Firefox中却没有。我能够通过对你的一个CSS规则进行微调来解决问题：

.post-ratings-rating {
    ...
    font-family: FontAwesome;
    font-size: 1.5em;
    width: 30px;
    ...
}

如果使用像素将width更改为绝对值，则图标不会移位。相对单位是问题的根源。为什么？我怀疑当从em转换为px时，浏览器的算法运算方式不同。