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觸發器都應該這樣做。雖然我沒有測試它。