段組するとFirefoxで背景が出ない

CSSで段組するとFirefoxで背景がでない。私も同じところではまったことがあります。皆さんも同じような経験はありませんか?これは段組などでメニューのbg指定をページの一番下までひく場合などにおこりがちです。またボーダーを入れる場合なども同様です。floatしたボックスにbgやボーダーを指定しても中身が少なければページの一番下まではひくことができません。そこでfloatしているボックスを括っているボックスにbgやボーダーの指定をする方法があります。その時にこの問題がおきます。


どうも高さというかfloatしたボックスの中身がそれを括っているボックスには認識されていない感じの現象が起きます。しかしこれは正常なものだそうで
す。floatしたボックスは浮いているものとして考えるんだそうです。そう考えるとボックスの中身が認識されないのもわかる気がしますよね?ではどうす
ればいいのか?解決方法はたくさんあります。お好きなものをご参照ください。なお今回の記事はFsikiさんのCSSでfloatを指定したボックスを含むボックスの背景が出なくなる件や、Web creators2008 2月号の「CSSのアクシデントを解決する92の手法」を参考にしています。
ではこちらをご参照ください。

上記のサンプル中の親ボックスをfloatするものはNetscape6では使えません。もう一方のものは「clearfix」と呼ばれるテクニックに非常に似ているものです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください