css - 在导航、CSS 中对齐图标字体背景

Question

我在主导航栏中为列表项之一使用图标字体。

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

现在的问题是，当我将鼠标悬停在图标上时(我使用的是背景色)，当您将鼠标悬停在图标上时，下方会出现一个空隙。如果我不使用背景颜色，这不会有问题，但我真的很想保留它。

为了说明我的意思，您可以在此处查看图片... https://dl.dropbox.com/u/94593656/test.jpg

关于如何纠正这个问题，以便当你悬停时，下面没有空隙，有什么想法吗？

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

Answer 1

像这样更改 iconfont 类:

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

有了 padding 和 line-height，这个链接变成了 40px 高，就像导航栏一样。高度不适用于内联元素链接 anchor ，因此我改用行高。