リストタグを使用した際にIEで生じる隙間を消す

リストタグを使用してメニューを作ることは良くあると思いますが、この時にIEだけに変な隙間が入る事があります。Firefox、Safari等で見るとちゃんと隙間なく詰まってるのに。。。またIE様のバグですかぁ。と憤る方もいると思います。
これはmarginやpaddingの問題でなく、IEではリスト内のインライン要素をブロック化した場合、line-heightの解釈がおかしくなるみたいです。

→メニューの間に隙間ができるサンプル

解決策は以下のとおり。

HTMLコード

 
<ul>
    <li><a href="#">メニュー01</a></li>
    <li><a href="#">メニュー02</a></li>
    <li><a href="#">メニュー03</a></li>
</ul>
 

CSSコード

 
ul {
    list-style-type: none;
    width: 300px;
}
 
a {
    display: block;
    padding: 5px;
    background-color: #2255EE;
    color: #FFFFFF;
    text-decoration: none;
    zoom: 1;
}
 
a:hover {
    background-color: #1144DD;
}
 

→隙間を消したサンプル

aタグにzoom: 1;を指定すれば隙間は消えてくれます。たったそれだけです。ただしzoomプロパティはThe W3C CSS Validation Serviceにひっかかるので、それが嫌な方はliタグにline-height:0;を、aタグにline-height:normal;を指定すれば解決します。