在某些浏览器中应用css代码的样式时会发生一些奇怪的事情......
请看一下示例...... http://jsfiddle.net/3FepW/3/
在Chrome中绿色div比在Firefox中更大，我真的不知道是什么问题，我认为在Firefox中显示应该如此，但在Chrome和IE9中显示不同。 我尝试了很多修改，无法解决这几天..，我可以使用高度：100％或溢出隐藏但我不能使用其中一个因为：溢出隐藏隐藏内部的一切，但我有一些可拖动/可排序的元素和高度：100％，因为我有一个可调整大小的功能，将扩大黄色div ...
答案 0 :(得分：1)
问题来自于边缘崩溃。 Chrome和IE正在正确呈现它。不确定Firefox在做什么。
这里有很多关于同样问题的问题。我在这里回答了其中一个 - Adding CSS border changes positioning in HTML5 webpage
基本上，兄弟姐妹，孩子和父母之间的顶部和底部边缘崩溃到最高。您放在float: left上的.c1可以防止这种情况发生。 margin-bottom上的.c3卡在.c1内，这就是它变大的原因（也就是'这就是为什么.c1变得更大'。）
尝试将overflow: auto;添加到.c2 - 另一种防止边距崩溃的方法 - 因此c1的边距会被卡在'.c2中 - 我假设这可能就是你要找的东西。
这是一个小提琴 - ＆gt; http://jsfiddle.net/joplomacedo/3FepW/5/。
答案 1 :(得分：0)
从margin-bottom: 10px;移除.c3 - 这就是导致此类行为的原因。据我所知，这个问题通常被称为“可折叠的边缘”，如果我错了，请有人纠正我。