2011-04-29 209 views
6

我剛剛注意到一些奇怪的事情,當創建一個網站的菜單。 Take a look at this Fiddle這說明了這個問題。css:懸停顏色錯誤

當您懸停在菜單項上時,請注意最後一個字母右側的小橙點。
這是怎麼發生的?

我可以通過降低前景色和背景色之間的對比度來降低「橙色效果」,但它不能解決實際問題。這是一個錯誤,還是有一個聰明的方法來解決這個問題?

我在Mac btw上使用Chrome。我注意到它不會出現在Firefox中,所以這是一個與瀏覽器相關的問題。

更新
感謝您的答案和建議如何解決它!我接受了馬塞爾的回答,因爲這似乎是爲什麼它正在發生的最正確的答案。我不知道是否是這種情況,但它似乎是一個Webkit問題。如果您注意到任何非webkit瀏覽器中的錯誤,請說出來,然後我會更新它。

+1

它有2個像素高和顏色'#3a0000',很奇怪......我以爲這只是我的眼睛。我在Windows 7上,並在Chrome10中看到它,但不是FF4。 – 2011-04-29 16:19:33

+1

很確定它與瀏覽器中的字體平滑/消除鋸齒有關,或者某些字體呈現擴展到「框大小」之外,並且不會被「半像素」完全包含在錨中:)看起來像這對我來說可能是一個錯誤(儘管很小)。你如何發現這超出了我...... – 2011-04-29 16:33:02

+0

當色彩之間有很大的對比時,這是非常明顯的。在小提琴中,我用黑色作爲懸停顏色來說明問題,但也很容易注意到任何其他顏色。 – 2011-04-29 16:36:35

回答

1

這是Calibri字體。如果你改變字體,它應該消失。

更新: 也許它不是字體本身,但更改爲不同的字體修復了問題。

+0

你從哪裏得到這個解釋?我嘗試了Impact字體,以確保它仍然存在。注意問題的粗體部分'爲什麼會發生這種情況? – 2011-04-29 16:21:47

+0

影響也是一樣的。試試Arial或其他。 – Alex 2011-04-29 16:25:14

+0

我嘗試過幾種字體,並且它們都在其中。此外,更改字體不是解決方案。 – 2011-04-29 16:26:46

5

如果您將padding-right: 1px;添加到li a中,橙色圓點將消失並保留字體。至於爲什麼發生這種情況,我能想到的唯一情況是T的兩個邊緣像素延伸過錨點框的邊緣。添加填充有點擴大了方塊,但它看起來相當ha。。

如果您將背景色添加到錨,您可以看到T的邊緣在背景之外。