Html 答：谷歌浏览器上的悬停颜色功能不正常

我想用CSS hover做一个链接。我正在使用字体脸与JennaSue制作另一种字体

CSS:

@font-face{
字体系列：JennaSue1；
src:url（font/JennaSue.otf）；
} 
@字体{
字体系列：JennaSue3；
src:url（font/JennaSue.ttf）；
} 
@字体{
字体系列：JennaSue2；
src:url（font/JennaSue.eot）；
} 
#澳大利亚{
位置：绝对位置；
字体大小：40px；
左：0px；
顶部：32px；
颜色：#fff；
字体系列：JennaSue1、JennaSue2、JennaSue3；
}
#澳大利亚a{
文字装饰：无；
颜色：#fff；}
#澳大利亚a:悬停{颜色：#b30101；}

HTML:

该字体在chrome上运行良好，但当我悬停链接时，它会显示如下：

谢谢你的回答，这里的链接你可以看到

---

您发布的代码没有错误。错误可能与其他相关元素有关。或者您正在使用的字体。

这似乎与j的左侧部分位于实际字符区域开始的左侧有关。请参见此示例（可能必须使用chrome），其中j的左侧未包含在div中。

尝试添加

字体权重。这似乎解决了问题

另一种可能是在左侧添加一点填充，以便在a标记中显示文本

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

正如所指出的，字体似乎有些奇怪。如果你看，左边的链接就像你的例子一样。我添加了一个边框来可视化
a
元素的边界。在那里，“j”和“p”突出在这个边界之外。通过向其添加底部和左侧填充（就像在右链接上所做的那样），悬停按预期工作

我想这是一个很快的解决方法，但我真的不知道如何正确地完成它。
试试：

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

我发现Chrome有时会忽略我的a风格，除非我使用：link伪代码。
也许jennasue已经对j做了一些stange来帮助或解决紧缺问题？谢谢你的回答。我修改了你的js小提琴，但仍然不起作用。这似乎是可行的，但没有解释为什么，这似乎是一个肮脏的黑客当他们跨浏览器工作并且没有引起任何问题时，黑客有什么问题？这其实不是什么大问题，我没有否决投票或任何事情。只是如果你不明白它们为什么会工作（可能是一个后来被修复的怪癖的结果），那么你就不能确定它们将来会继续工作。这可能与字距调整和字体的构建有关。我添加了另一个可能的答案。我使用了不同的背景颜色来可视化边界，但你似乎已经找到了一个很好的解决方案，那就是在a标签上添加一点左填充（底部填充对于在我的chrome中工作来说不是必需的。）这肯定是最好的答案：）@Grezzo怪异，对我来说，底部填充物是它工作所必需的（Chrome 20.0.1132.17 beta版）。你是说这不适合你吗？盒子是从j的底部穿过还是什么的？我在Chrome19.0.1084.52M上运行XP，而这个框一直围绕着这个词。是的，它不工作。它用几个像素（如4或5）切割j和p。顺便说一下，我正在运行OSX 10.7.4。
#australia a:link {
    text-decoration:none; 
    color:#fff;
}
#australia a:hover { color:#b30101; }