CSS Div元素仅在具有边框时才起作用

Question

我正在设计一个新基金会的网站，我已将4月15日定为完成它的截止日期。除了编辑内容和微调设计外，它已准备就绪。在微调中，我正在努力解决一个令人厌烦的小问题，我想请某人帮我解决。问题很简单：网站结构中的一个分区将无法正常运行，除非它周围有边框。从来没有见过如此不稳定的东西。

问题似乎与元素在布局中的交互方式有关。首先，有html标签，其中包含背景图像，一条小溪的jpeg，远处有一些建筑物，以及由位于背景图像底部的分区标记（#greengrass）创建的绿色草丛。 div＃greengrass被设计为向内延伸，作为内容div，在它之上，延长。正是这个#greengrass元素执行得很笨拙，除非周围有一个边界。

具体来说，如果其边框被移除，它会向上投射并覆盖背景图像，即使它位于背景图像结束的位置。因此，它的向上投影使整个页面背景变为绿色。但是当它有一个边界时，小溪的背景图像就像阳光明媚的春日阳光一样明亮。

因此，我有一个问题：为什么分裂边界的缺席或存在会影响其行为？以下是基金会测试网站的网址：http://postmaterial.org/tests/signin-ap.php。在顶部中心，我添加了一个链接，可以让您在有界和无边界的div＃greengrass效果之间切换。我不知道标签行为的原因，并希望得到解释。感谢。

Answer 1

如果没有#greengrass的边界，它的孩子的负边缘顶部会塌陷（并将整个构造拉出视线，向上），结果，＃greengrass不再被顶部推下去了。

border可以防止折叠边距，因为display：inline-block或display：table或float：left就是这种情况（overflow：hidden不是这里的选项）。在旧的IE中，任何haslayout触发器都应该像zoom：1那样。不过，我没有测试过它。

Answer 2

回答你的问题：“为什么分裂边界的缺席或存在会影响其行为？”我同意ichao（正如他的回答所说），利润率下降是个问题。

但是，我认为解决方案是只保留border-top: 1px solid #009900，因为它只是防止边距崩溃所需的顶部边框。这样可以防止水平滚动条出现。