html - 悬停时文本偏移 1px 并带有颜色过渡

Question

在此网页上，当您将评分悬停在每个帖子的右侧时，图标将在颜色过渡时向左偏移 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 时会采用不同的算法。