operaでのfloatの挙動

TPLHさんでOperaでfloat要素の後続が回り込まないとのエントリーを見て、気になったことをボクもエントリーしておこう。

TPLHさんのエントリーでは以下の記述で、OperaだとBOX3が回り込まないというもの。

<div class="sample-code">
	<div style="width:240px; list-style:none; margin:0; padding:0;">
		<p style="border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccccff; ">BOX1</p>
		<p style="width:93px; height:130px; border:1px #333 solid; margin:0 10px 0 0; padding:10px; background:#ffcccc; float:left;">BOX2</p>
		<p style="width:93px; border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccffcc; ">BOX3</p>
		<p style="width:93px; border:1px #333 solid; margin:0 0 10px; padding:10px; background:#ccffcc; ">BOX3</p>
		<p style="width:93px; border:1px #333 solid; margin:0; padding:10px; background:#ccffcc; ">BOX3</p>
	</div>
</div>

サンプル

たしかにOperaとFirefoxで表示が全く異なる。

Operaのバグとしているが、これがOperaのどのようなバグなのかが気になった。

float周りの実装はOperaの方がFirefoxより優秀なので、Firefoxのバグではないかと当たりをつけたのですが・・・。

まず、li要素のdisplayプロパティ、これは『list-item』つまりlist-styleを保有するブロックレベル要素(のはず)

つまり、li要素はそれ以前の要素が浮動要素(つまりfloatされている要素)になっていても回り込んで表示などはしない(はず)。

li要素をp要素などに置き換えるとわかりやすい。

サンプル

Firefoxの表示はliをインライン要素として扱っている気がする。

ただ、li要素のdisplayプロパティに明示的にinlineの値を与えた場合marginなどは保持することができない。

サンプル

ためしにdisplayプロパティにblockの値を付けるとlist-itemの場合と同じ表示になる。

サンプル

うーん。混乱してきた。

li要素をp要素に変えたバージョンのp要素にdisplayプロパティにlist-itemを与えてみた。

サンプル

どうもdisplayプロパティの解釈による表示の違いではないようです。

結論

『Firefoxでli要素は浮動体により短縮されたbox内に流し込まれる』

みたいな感じなのかな。
li要素の正しい表示規則がちょっと気になるな。

詳しい人いたら教えてください。

追記(2007/7/3)

はてなブックマークで詳しい人が教えていただきました。

どうもFirefoxのバグのようです。
display: list-item; のボックスがfloatingボックスを避けて縮む

関連エントリー

ウェブ標準・コーディング・コンテスト
CSS が valid でなければいけない理由
floatした際に背景が消える件【css tip】
スタイルを初期化する【css tips】
フォントサイズはどうしましょう?

スポンサードリンク

«リンクを追加する秀丸マクロ-insertA.mac- | メイン | SEO SEM Technique vol.1»