在导航，CSS中对齐图标字体背景

我在我的主导航中使用了其中一个列表项的图标字体。在导航，CSS中对齐图标字体背景

我把这个图标放到它自己的类中，并给它一个字体大小，以便它与其余的导航相匹配。我还必须为图标字体分配一个特定的行高，以便排列。

现在的问题是，当我将鼠标悬停在图标上（我正在使用背景颜色）时，当您将鼠标悬停在图标上方时，下方会出现一个间隙。如果我不使用背景颜色，这不会成为问题，但我真的很想保留这一点。

为了说明我的意思，你可以在这里看到的图像... https://dl.dropbox.com/u/94593656/test.jpg

我如何能解决这个问题，所以，当你徘徊，有下面没有缝隙任何想法？

我已经上传HTML和CSS这里... http://codepen.io/anon/pen/xeCLj

2012-10-12 Adam

请张贴您的CSS和相关的HTML。 – sshow

可能是修复此问题的图像上的“vertical-align：middle”，但我不会将它作为答案发布，因为我们不知道当前的CSS – Joe

ok这里是当前的html和css http：// codepen .io/anon/pen/xeCLj - 你可以在safari或chrome中查看它，我不认为主页图标是在firefox中加载的。 – Adam

更改iconfont类，像这样：

.iconfont { 
    font-family: 'EntypoRegular'; 
    font-size: 25px; 
    line-height: 20px; 
    vertical-align: middle; 
}

随着填充和行高，这个环节变得高40点，就像导航栏。高度在内联元素链接锚点上不起作用，所以我使用了行高。

2012-10-12 23:57:42 BeWarned

谢谢，但我不确定你是否真的在链接上尝试过，但垂直对齐对我不起作用;（ – Adam

这不仅仅是垂直对齐，你也需要改变行高。 http://codepen.io/bwarner/full/uwlhB – BeWarned

一种方式来做到这将是怎样的一个黑客：你的财产min-height设置为类似20px。

2012-10-12 23:41:45 bperson

回答