2007年2月17日(土) 04時48分32秒 [Web関連]

floatで回り込んだ文字列が消えるバグの回避策

floatプロパティを使ってブロックを左右に寄せたとき、回り込んだ文字列の表示が消えてしまうバグがIE6にあります。これを回避する方法として、回り込む側のブロックに対して、widthプロパティを使って横幅を明示するというものがあります。

確かに横幅を指定すれば、回り込んだ文字列が消えてしまうバグは回避できるんだけど、レイアウトの仕方によってはwidthプロパティでの横幅の指定が苦しい場合があるのですよね。100%と指定すると、親ブロックとの幅の関係で回り込みが行えなかったり。かといって、99%とか指定するとスペースが無駄になったり。

そういう場合には、widthプロパティじゃなくて、heightプロパティに値「100%」とかを指定すると良いです。回り込んだ文字列の表示が消えてしまうバグの回避策は、何もwidthプロパティで横幅を指定するだけではないのですよね。heightプロパティで高さを指定したって構いません。それでもバグは回避できます。

というわけで、heightプロパティを使って適当な高さを指定しちゃうのが良さそうです。まあ、レイアウトの仕方にも寄るんだけど。段組を組んでる場合は、問題なく使えるんじゃないかと思います。

レイアウト上の都合で、heightプロパティの値に「100%」を指定できない場合は、具体的な値を指定しちゃっても良いでしょう。IE6には、ボックスの高さを勝手に拡張しちゃうバグもあるので、高さを制限しても（制限しない場合と）同じ表示になります。
もっともその場合、CSSを正しく解釈するブラウザ（Firefox・OperaやIE7）では、ちょっと困った表示になる可能性があるので、CSS Hackとかを活用して、IE6以下にのみ適用されるよーな書き方をする必要があるかも知れませんが。

何にしても、widthプロパティに値を指定して回避しようとするよりも、heightプロパティを使って回避する方が、レイアウトの調整面から言って楽な気がします。