The Trap of Web Design

スタイルシートでコラムブロックを生成するのに基本はフロート使います。その周辺に関連する指定にはブラウザ毎の仕様の違いやバグが多くてこれらの問題回避策は経験に頼るのがほとんどです。このサイトもまだまだ完全とはいえない状況で個別アイテムページの新レイアウトがフロート解除したい箇所でなされていないブラウザがあるのを見つけました。なにしろその問題となるブラウザが Mozilla なのでハッキリいって動作基準となるものだったため自分の記述に必ずどこか無理があると思いながら修正を試みていますがまだ直っていません。ちょっと前にほぼ同様の現象に遭遇したのですがそのときはなにげなくブロックレベル要素をいれることで回避できていました。今回はそれと異なる原因があるようでまたページレイアウト全体の最初の指定からたどっていかなくてはなりません。毎度のことであるし業務じゃないので気楽ですが。

バグリストを確認

• 親要素のマージン幅によってはclearが効かない

おそらくこれに該当すると思うと考えたのだけど、それでなんとかしようとやっているうちに、これもしかすると仕様書通りの動作ではないかと疑い始めている。左右にフロートブロックでふって、そのフロートブロック内でフロートを使ったときに、左ブロックでクリアしたら右ブロックでクリアされてしまうことになる。というかいつもこの「フロート入れ子をする場合」に関して悩むことは多く、フロートをできる箇所とそうでない箇所を経験的に掴んでいたつもりなんだけど。ここではもっと単純に「親ブロックがあって、中にフロートブロックがあって、フロートしてないコンテンツがあって、その下でクリアしてもフロートブロックのほうが高さがある場合にフロートブロックがクリアできない現象に困っている。そして問題はフロートブロック制御のマイナスマージンが絡んでいるということ。うーん、わからんぞ。絵にかいてみるか。