html - 色遷移を伴うホバーでのテキストオフセット1px

Question

このウェブページで、各投稿の右側にある評価にカーソルを合わせると、色が変化している間、アイコンが左に1pxオフセットします。ただし、これはChromeとおそらくSafariでのみ発生し、Firefoxでは発生しません。

これはバグですか？私のコードに何か問題がありますか？

アイコン自体は、FontAwesomeというフォントからのものです。
ページのこの部分をjsfiddleで再作成しようとしたところ、バグは発生しませんでした。

これは私が見るものです：

Answer 1

Chromeでは問題が発生しますが、Firefoxでは発生しません。CSSルールの1つを少し調整することで、問題を修正できました。

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

widthピクセルを使用してを絶対値に変更しても、アイコンはシフトしません。相対的な単位が問題の原因でした。なんで？emからpxに変換するとき、ブラウザは異なる方法で計算を行うのではないかと思います。