Oct04
Firefoxでの回り込みと背景が伸びない現象への対処法
Fireｆoxではdivなどの中にfloatをかけた要素を入れた場合、floatを解除しないと背景が伸びなかったり、継続要素の回り込みなどの現象がおこります。
それらの対処法をいくつかご紹介します。
1.HTMLのdiv要素の閉じタグの手前にfloatをクリアした要素を入れる。
※問題はないがソースが汚くなる。
<div id="container"> <img src="01.jpg" class="float_left" /> <br clear="all" /> </div>
2. オーバーフローをかける
※IEはスクロールバーがでるので控えたほうがいいかも。
div#container {
overflow:auto;
}
3.after擬似クラスを使用する。
※現時点ではたぶんベストな方法
div#container:after {
content : "";
display : block;
height : 0;
clear : both;
}
注意点として、2番目の方法ではIEの印刷プレビューで表示崩れが起こるので 印刷用CSSを用意する必要があります。
結論として自分的に、現段階では１.3番目の方法がベストなんじゃないかと思いました。
【CSS】
コメント
俺は前の会社で、随分この現象について悩んだな〜。いかんせんスペシャリストがいないもんで、背景が伸びない原因が何なのか全くわからなかったよ。結局１の方法で解決できたけど。
３の方法は恥ずかしながら全く意味がわかりませんわ。
投稿者: KOZZY | 2006年10月 5日 19:19
after擬似クラスはIE6では効かないけどFirefoxでaタグが改行されないときとか、フッターのテキストリンクに”ホーム｜お問い合わせ｜”なんかの”｜”のを入れるときに今後使われると思いますよ。
投稿者: u_ziq | 2006年10月 6日 00:32
初めまして。
Firefoxではなぜ背景が繰り返されないのかと悩んでいました。
３の方法を導入したら、うまくいきました。
どうもありがとうございました。
私のブログの記事中でこちらを紹介させていただきましたので、気が向いたら来てくださいね。
投稿者: もも | 2007年3月10日 00:39
ももさん＞
はじめましてももさん。
リンクありがとうございます。
お花のコンテンツが豊富ですね～
仕事がらお花屋さんのサイトもよく手がけます。
また参考にさせていただきます！
投稿者: u-ziq | 2007年3月10日 10:47
1の方法はclearのためにHTML文書を変える必要があります
3の方法は見えないだけで存在している場合があります
そこで2の方法を修正した手法もあり、ほとんどのブラウザで問題がありませんでした。
http://kikky.net/pc/float_bg.html
投稿者: (ai) | 2007年8月17日 00:53