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»