a：懸停顏色在谷歌瀏覽器上無法正常工作

我想用CSS懸停進行鏈接。我正在使用font-face與JennaSue創建另一種字體。a：懸停顏色在谷歌瀏覽器上無法正常工作

CSS：

@font-face { 
    font-family:JennaSue1; 
    src: url(font/JennaSue.otf); 
} 
@font-face { 
    font-family:JennaSue3; 
    src: url(font/JennaSue.ttf); 
} 
@font-face { 
    font-family:JennaSue2; 
    src: url(font/JennaSue.eot); 
} 

#australia { 
    position:absolute; 
    font-size:40px; 
    left:0px; 
    top:32px; 
    color:#fff; 
    font-family: JennaSue1,JennaSue2,JennaSue3; 
} 
#australia a { 
    text-decoration:none; 
    color:#fff;} 
#australia a:hover { color:#b30101; }

HTML：

<div id="australia"><a href="#">Australia</a></div>

字體的工作以及在鉻，但是當我將鼠標懸停鏈接顯示它像this picture：

Hover image http://s18.postimage.org/q9j1rq4sn/before.png

感謝在這裏回答鏈接，你可以看到http://jsfiddle.net/6UdYd/1/;

來源

2012-05-30 Yan Susanto

烏爾圖像壞了。 – Katti

正如Grezzo指出，似乎有與字體正在進行一些奇怪的事情。如果你看看this fiddle，左邊的鏈接就像你的例子。我添加了一個邊框來顯示a元素的邊界。那裏的「j」和「p」突出在這個邊界之外。通過添加底部和左側填充（如右側鏈接所示），懸停按預期工作。

這是我猜的一個快速解決方法，但我真的不知道如何正確地做到這一點。

來源

2012-05-30 09:39:51 Maehler

我使用了不同的背景顏色來顯示邊界，但是您似乎確實找到了一個很好的解決方案，那就是爲一個標記添加一點左邊的填充（底部填充對於它的工作不是必需的我的鉻）。 – Grezzo

這是最好的答案，肯定.. :) – Katti

@Grezzo奇怪的是，對我來說底部填充需要它的工作（Chrome 20.0.1132.17測試版）。 – Maehler

http://jsfiddle.net/rakesh_katti/n37hC/2/

您發佈的代碼沒有錯誤。錯誤可能與其他相關的元素有關。或者你正在使用它的字體。

來源

2012-05-30 09:15:37 Katti

感謝您的回答。我修改你的js小提琴，但仍然無法正常工作。 http://jsfiddle.net/6UdYd/1/ –

看起來這個j的左邊部分是在實際的字符區域開始的左邊。看到這個例子（可能必須使用chrome）http://jsfiddle.net/JGgHf/其中j的左邊沒有被包含在div中。

來源

2012-05-30 09:16:21 Grezzo

也許jennasue已經做了一些與j的協調，以幫助或解決字距問題？ – Grezzo

嘗試添加一個font-weight。這似乎解決了problem。

#australia a:hover{ 
    color:#b30101; 
    font-weight: 500; 
}

另一種可能是填充的一點點增加的一個標籤的左邊，這樣的文字fits。

#australia a{ 
    text-decoration:none; 
    color:#fff; 
    padding-left: 3px; 
}

來源

2012-05-30 09:36:11

這似乎工作，但沒有解釋爲什麼，它似乎就像一個骯髒的黑客 – Grezzo

黑客當他們跨瀏覽器工作，並沒有造成任何問題的問題是什麼？ –

這不是一個真正的問題，我沒有投票或任何事情。只是如果你不明白他們爲什麼會工作（可能是後來得到解決的怪癖的結果），那麼你不能確定他們將來會繼續工作。 – Grezzo

嘗試：

#australia a:link { 
    text-decoration:none; 
    color:#fff; 
} 
#australia a:hover { color:#b30101; }

我發現，除非我使用的是Chrome瀏覽器有時會忽略我的一個風格：鏈接僞代碼。

來源

2012-05-30 09:45:39 Gavin

a：懸停顏色在谷歌瀏覽器上無法正常工作

回答

相關問題