references

CSSのネタ～縦並びのメニュー

CSSで縦並びのメニューを構築する場合、リスト要素<ul><li>とリンク要素<a>を組み合わせるのが一般的。

その時、WindowsＩＥ５～６系ではリストの間に隙間が出来てしまう事がある。

その場合にリストの隙間を消すテクニックを２つ

<ul><li>HTMLの改行を無くす

<ul><li><a href="#">メニュー１</a></li><li><a href="#">メニュー２</a></li><li><a href="#">メニュー３</a></li></ul>

上記の様に該当するＨＴＭＬのソース上において<ul></ul>間の改行を使わないで記述する方法。

ＣＳＳでコントロール

li{
   display:inline;
   height:auto;
}
a{
   display:block;
}

上記の様にli要素にdisplay:inlineをa要素にdisplay:blockを指定する。

さらにＭａｃ版ＩＥ５系用にheightプロパティを指定する。（a要素で高さ指定した場合、ココではautoを指定したが、高さ指定でもいい）