1

メインナビゲーションのリストアイテムの1つにアイコンフォントを使用しています。

このアイコンを独自のクラスに配置し、ナビゲーションの他の部分と一致するようにフォントサイズを指定しました。また、アイコンフォントに特定の行の高さを割り当てて、整列させる必要がありました。

ここで問題となるのは、アイコンにカーソルを合わせると（背景色を使用しています）、その下にギャップがあり、アイコンにカーソルを合わせると表示されます。背景色を使わなくても問題ありませんが、そのままにしておきたいと思います。

私が何を意味するかを説明するために、ここに画像を見ることができます... https://dl.dropbox.com/u/94593656/test.jpg

ホバーしたときに下に隙間がないように、これを修正する方法について何かアイデアはありますか？

ここにHTMLとCSSをアップロードしました... http：//codepen.io/anon/pen/xeCLj

4

2 に答える 2

0

これを行う1つの方法は、一種のハックです。プロパティmin-heightをのようなものに設定します20px。

于 2012-10-12T23:41:45.443 に答える
0

次のようにiconfontクラスを変更します。

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

パディングと行の高さを使用すると、このリンクはナビゲーションバーと同じように40pxの高さになります。高さはインライン要素のリンクアンカーでは機能しないため、代わりにline-heightを使用しました。

于 2012-10-12T23:57:42.633 に答える