てんぽ: IEとwidthとブロック整形コンテキスト

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

IEとwidthとブロック整形コンテキスト

2006年09月01日(金)

普段CSSを書くときにはブロック整形コンテキスト(block formatting context)のことなんて考えていませんが、実際にそれが問題になるケースがあったのでメモ。

一つ目の問題は Firefox で広告ボックスの下にスペースが空いてしまうこと

これはたぶん、Clearing floatsのせいでしょうね。 Clearing floatsはフロートのコンテナにoverflow:hiddenやautoを指定することでコンテナの高さを確保するテクニックですが、 overflowのせいで新たなブロック整形コンテキストが生じています。 これが先行する右フロートと重なりそうな場合には、CSS2.1 9.5の規則によって、ボックスの幅が縮められる(またはclearされる)ことになります。 (floatやoverflowとブロック整形コンテキストの関係については『セオリー・オブ・スタイルシートの「3.5 コンテンツの溢れと切り抜き」に詳しく書かれています。)

二つ目の問題はIEで画像が入ると「Clearing floats」がIEで効かない?

これはIE6の幅か高さを指定しないボックスにはoverflowが効かないバグのせいだと思います。 では幅か高さを指定すればいいかというと、今度はフロートに後続するボックスの幅がフロートに合わせて短縮されるバグに引っかかります(上のFirefoxのような表示になる)。

そういうわけで、Clearing floatsは使わずにどこかでclearするのがいいと思います(たとえば末尾の「URL -キャッシュ- はてなブックマーク」の部分で)。

それにしてもIEの挙動は不思議です。

まるで幅か高さを指定すると新たなブロック整形コンテキストを生じるかのよう。

#107
カテゴリ:HTML・CSS
タグ[ CSS メモ IE ]

(-0件)

コメントの投稿

トラックバック(-0件)

http://mb.blog7.fc2.com/tb.php/107-b26c15a6

<<萌えぺぐえんく | リストマーカーをクリック(Fx)>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。