悬停在Webkit中会在边缘显示原始颜色

Question

我正在使用一些字体图标来表示我正在建立的网站上的Twitter，Facebook和RSS，它们看起来很棒。当它们处于活动状态和焦点时，它们会在悬停时更改为适当的颜色，并且在Firefox和Opera上看起来很棒。

我的问题在于Mac上的Safari和Chrome（所以我假设是webkit）。在悬停时，您可以在一个或两个图标的边缘看到一点点白色。

我尝试将链接/访问的颜色更改为绿色，你可以在悬停时看到一点绿色，所以我知道它是默认的颜色。

在这里查看页脚左侧的图标：http://tempertemper.net/index2

以下是我拍摄的一些屏幕：

推特鸟在背景下看起来不太好但我还有一些调整要做。你可以在它的喙周围做白色。 facebook徽标显示顶部和底部以及左侧和底部边缘的rss符号。

感谢您一看，

马丁。

Answer 1

我在使用Univers字体的Mac上遇到了与Webkit相同的问题。

我通过在我的字体大小属性中设置半像素来解决它：font-size: 18.5px

Answer 2

我联系了制作字体的小伙子，他建议改变@ font-face请求的顺序，以便svg高于woff和ttf并且它使它变得更好。然后我使用字体大小调整并选择了4.15em，这在Safari或Chrome for Mac中没有显示白边。 4.1,4.2,4.3,4.4等都呈现出轻微的白线。

所以它已修复，但我不知道为什么！

感谢所有人看看，如果有人知道为什么会发生这种情况，除了一些字体大小，我有兴趣知道：）

Answer 3

将此添加到锚样式：

.social a:link, .social a:visited {
    color: white;
    border-bottom: none;
    text-decoration: none;
}