IE6でネガティブマージンを使うとdisplay:blockなリンクの背景部分がクリックできなくなる

一体いつ以来だか分からないけどCSSネタ。元々はこっちが自分の主戦場だったんだよな。

<div id="content">
  <ul>
    <li><a href="page01.html">page01</a></li>
    <li><a href="page02.html">page02</a></li>
    <li><a href="page03.html">page03</a></li>
  </ul>
</div>

li {
  display:inline;
}
li a {
  display:block;
  width:100px;
  height:20px;
  float:left;
  border:1px solid #999;
}

なんて具合にアンカーにdisplay:blockを設定してメニューっぽいのを作ることってよくありますよね。

ところが、これに

#content {
  float:left;
  margin-right:-100%;
}

なんて指定が入ると、Windows IE6ではリンクの背景部分がクリックできなくなるようです。テキストの部分しかクリックできません（一応ボーダーもできる）。
display:blockはちゃんと効いていて、ボーダーも背景も指定のサイズで描画されますが、リンクのクリックだけができなくなりました。ImageReplaceなんか使ってたりすると、テキストが無いので全くクリック不可能なリンクのできあがりです。

IEでの安定性を考えると、やっぱり段組はネガティブマージンを使ってfloatで配置したいところ。仕方なくimg要素を直接置いて回避することにしました。今回はそれで問題ないけど、後々のメンテナンスとか考えるとHTMLにimgを置きたくない場合もあるしなぁ…参るわ。

なお、Firefoxとかはもちろんですが、IE7でもこのバグは直ってました。完全にIE6だけのバグのようです。