一部のブラウザーで css コードのスタイリングを適用する際に、奇妙なことが起こっています...
例を見てください... http://jsfiddle.net/3FepW/3/
Chrome では緑の div が Firefox よりも大きく、何が問題なのか本当にわかりません。Firefox では正常に表示されると思いますが、Chrome と IE9 では表示が異なります。私は多くの変更を試みましたが、何日もこれを解決できません..、高さを使用できます: 100% またはオーバーフローを非表示にしますが、そのうちの 1 つを使用できません。並べ替え可能な要素と高さ: 黄色の div を拡大するサイズ変更可能な関数があるため、100%...
この問題は、マージンの崩壊と呼ばれるものから発生します。Chrome と IE は正しくレンダリングしています。Firefoxが何をしているのかわかりません。
ここには、同じ問題に関して多くの質問があります。ここでそれらの1つに答えました-HTML5 WebページでのCSSボーダー変更の配置の追加
基本的には兄弟間の上下の余白であり、子と親は最上位に折りたたまれます。float: leftあなたが着るの.c1がそれを防ぎます。margin-bottomオン.c3が内側に引っかかって、.c1それが大きくなる理由です（つまり、「だから.c1大きくなる」ということです）。
に追加overflow: auto;してみてください.c2- マージンが崩壊するのを防ぐ別の方法 -c1のマージンが代わりに「スタック」し.c2ます - おそらくそれがあなたが探しているものだと思います.
ここにフィドルがあります-> http://jsfiddle.net/joplomacedo/3FepW/5/。
margin-bottom: 10px;from を削除します.c3- これがこのような動作の原因です。私が知る限り、そのような問題はしばしば「折り畳み可能な余白」と呼ばれます。もし私が間違っていたら、誰かが私を訂正してください。