floatで横並びにしたli要素がIE6で正しく折り返さない現象の回避法

IE6は親ボックスの幅が広がるバグがあるので、
widthで直接的に幅を指定しないとうまく折り返しが効きません。
要素の幅に開きがる場合など、widthを指定せずにボックス内で横並びにしたい際の回避法です。

こんなhtmlの場合。

<ul>
<li><a href="xxx.html">XXXX</a></li>
<li><a href="xxx.html">XXXX</a></li>
</ul>

まずCSSに

で折り返さないように指定。

しかしこれだけだと、IEで一部のli要素が消えてしまうバグが発生する箇所があったので、

aタグをインラインに流し込むことのできるブロック要素にし、回避できました。
display:block;でいいかなと思いましたが、
これだとヘンなスペースができてしまいます。

Tweet