IE6以下でリストに隙間が出るバグの対処法

これはWEBコーディングをやっていれば、必ず1度は経験したことがあるはず。
<ul>や<ol>を使ってリストを作った際、IE6以下のブラウザでのみ<li>の間に意図しない隙間が空いてしまうというバグです。

CSSでmarginとpaddingを0に指定してようが、line-heightを100%にしようが、一向に解決されずイライラしたことがある人も多いかと思います。

HTMLのソース上で<ul>から</ul>までの間の改行とインデントを無くせば一応隙間は消えるのですが、抜本的な解決じゃないし、何しろソースが美しくない('A`)

というわけで、スマートかつ簡単な解決法。

CSS上で該当のリストのliに対して「zoom: 1;」を入れるだけでOK。

要はこういうことです。

ul li {
zoom: 1;
}

簡単ですね。

ただし、場合によってはこれでも解決しないことがあります。
その際には、

ul li {
vertical-align: bottom;
}

も試してみて下さい。

このどちらかのやり方を使えば、IE7以上やFirefoxなどのモダンブラウザと変わりなく表示されます。
お試しあれ。