2010-12-16 11 views
1

ウェブデベロッパーツール(Firebug、IE9、Chrome Dev Tools)でこのページをチェックして、Firefoxで#c​​ontainer divが自動サイズ調整されない理由を教えてください。ほとんどのブラウザでは見えるが、FFでは表示されない、背景の影があるはずです。思考?Divの自動サイズ調整ツールはありません

http://d2burke.com/hosted/vaacme/

ありがとう!

+0

私はFirefoxで、CSSが若干異なっていることがわかり、 "URL(" ../画像/ PageShadow.png」) repeat-y scroll 0 0 transparent "と比較して" background:url(http://d2burke.com/hosted/vaacme/images/PageShadow.png)repeat-y; " Chromeでこれを引き起こす原因を知っていますか? –

答えて

2

#container内部全要素がフローティングさので、内部のすべてが通常のドキュメントフローから取り出され、それがゼロパディングと高さを有しているので、したがって、それは、無に収縮します。この問題を解決するには、適用することができ、次のいずれか

#container { 
    overflow: hidden; 
} 

または削除を:

.break { 
    float: left; 
} 
+0

それはなぜChromeでうまくいくのですか? – Fred

+0

オーバーフロー:隠されたトリック。だから、なぜ、すべての要素を浮かべるのが「通常の文書フローから抜け出す」のですか? – d2burke

+0

@ d2burkeこれは、フローティングの仕組みです。通常の上から下へのフローから特定の要素を取り出し、 'float'プロパティに対して定義した値に応じて左または右にシフトします。詳細については、これを参照してください:http://reference.sitepoint.com/css/floatclear –

関連する問題