1

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

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

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

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

关于我如何纠正这个问题的任何想法，以便当你悬停时，下面没有间隙？

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

4

2 回答 2

0

这样做的一种方法是一种 hack：您将属性设置min-height为类似20px.

于 2012-10-12T23:41:45.443 回答
0

像这样更改 iconfont 类：

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

使用 padding 和 line-height，这个链接变成 40px 高，就像导航栏一样。高度不适用于内联元素链接锚点，因此我使用 line-height 代替。

于 2012-10-12T23:57:42.633 回答