0

我正在为一个新的基础设计一个网站，我已将 4 月 15 日定为完成它的最后期限。除了编辑内容和微调设计外，它已准备就绪。在微调中，我正在与一个令人讨厌的小问题搏斗，我想请人帮我解决。问题很简单：除非它周围有边框，否则站点结构中的一个分区将无法按我希望的那样运行。以前从未见过如此不稳定的事情。

该问题似乎与元素在布局中的交互方式有关。首先，有一个包含背景图像的 html 标记，一条小溪的 jpeg，远处有一些建筑物，以及由位于背景图像底部的分区标记 (#greengrass) 创建的绿草丛。div#greengrass 的样式被设置为向下延伸，因为内容 div 位于其顶部，并延长。正是这个#greengrass 元素表现得很笨拙，除非它周围有边框。

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

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

4

2 回答 2

0

没有#greengrass 的边界，其子元素的负边距顶部会塌陷（并将整个构造拉出视线，向上），因此，#greengrass 不再被顶部向下推得足够多。

边框防止折叠边距，如 display:inline-block 或 display:table 或 float:left 在这种情况下会（溢出：隐藏在这里不是一个选项）。在旧的 IE 中，任何像 zoom:1 这样的 haslayout 触发器都应该这样做。不过，我没有测试它。

于 2012-04-07T17:21:49.230 回答
0

回答您的问题：“为什么该部门边界的缺失或存在会影响其行为？” 我同意 ichao（正如他的回答所述），即利润率下降是问题所在。

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

于 2012-04-07T17:49:51.510 回答