Operaでfloat要素の後続が回り込まない

最近会社とは別にhtmlを書く機会があり、そこで意外な現象を発見したので書き残しておく。

XHTML+CSSなんて呼ばれ方をされているなかで、htmlではlist(箇条書き)で書かれているものの中のリスト項目のそれぞれについて、CSSで大きさ、並べ方を不規則に設定することはよくあること。html上では箇条書きであるから並びは通常上から下に進むが、これを並列にしたりする必要が出てくると、プロパティfloatを使うことがよくある。

このfloat、モダンブラウザではそれほど癖なく反映してくれるようにはなったが、IE6ではfloatを指定したmarginが2倍になるなどのバグも持っていて、現状なかなか異ブラウザ間で同様の反映をしてくれないのが困ったちゃん。大概馬鹿をやるのはIE6なんだけれども、今回はOpera9がおかしな動きを見せてくれた。詳細は以下のとおり。

firefoxやNN7、IE7では綺麗に見えているはず。これはul単体だけど、liに別々のCSSをあてて並びと大きさを調整している。IE6ではBOX2の右にどこから発生したんだかわからない余白があって領域がオーバーして回りこまない。Operaではなんだかわからないことになっている。調べてみたが、これはOperaの持つバグのようだ。

解決策としては、BOX3に同じくfloatを指定してやる。すると以下のようになる。

firefoxやIEで見ている人にはなんのこっちゃだろう。Operaがこういう困ったちゃんをやらかすとは意外だった。アクセス解析などを覗くと1%とかしか使われていないマイナーブラウザだけど、優秀だ優秀だと言われ続けている印象があり、今までもOperaだけ不具合を起こすなんて経験が僕にはなかったので。