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

2009年06月01日 11:02

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に

li {white-space:nowrap}

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

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

a {display:inline-block;}

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

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




正当なCSSです!