懸停時帶有顏色轉換的文本偏移量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的轉換時做了不同的算術運算。