CSS Div元素函数只有当它有一个边框

Question

我正在设计一个新基金会的网站，并且我已经将4月15日设置为完成它的截止日期。除编辑内容和微调设计外，它已准备就绪。在微调中，我正在与一个令人讨厌的小问题搏斗，我想请某人请帮我解决。问题是这样的：网站结构中的一个分区将无法正常工作，因为我希望它的功能除非它周围有边框。以前从未见过如此无常的事物。

该问题似乎与元素在布局中如何相互作用有关。首先，存在背景图片的html标签，远处有一些建筑物的jpeg小溪，以及位于背景图片底部的分区标签（#greengrass）创建的绿色草地。 div＃greengrass被设计为向下延伸，因为内容div位于顶部，延长。正是这种#greengrass元素的表现很笨拙，除非在它周围有边界。

具体而言，如果删除了其边框，它会向上投影并覆盖背景图像，即使定位到开始背景图像结束的位置。因此，向上投影会使整个页面背景呈绿色。但是当它有一个边界时，小溪的背景图像像阳光明媚的春日一样明亮。

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

Answer 1

要回答你的问题：“为什么该部门边界的缺席或存在会影响其行为？”我同意ichao（正如他的回答所述）崩溃的利润率是问题。

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

Answer 2

没有#greengrass的边界，它的孩子的负边缘倒塌（并且将整个构建物拉离视线，向上），结果，#greengrass没有被顶部压低。

border可防止折叠页边距，如下所示：inline-block或display：table或float：left在这种情况下（overflow：hidden不是此处的选项）。在旧的IE中，像zoom：1这样的任何haslayout触发器都应该这样做。虽然我没有测试它。