悬停时带有颜色转换的文本偏移量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的转换时做了不同的算术运算。