2012-08-02 94 views
0

有些奇怪的是,在應用的一些瀏覽器CSS代碼的樣式發生了......保證金的錯誤......我不明白什麼是錯

請參加的例子來看看...... http://jsfiddle.net/3FepW/3/

在Chrome中,綠色div比Firefox更大,我真的不知道是什麼問題,我認爲它在Firefox中顯示,但在Chrome和IE9中顯示的不同。我可以使用高度:100%或溢出隱藏,但我不能使用其中之一,因爲:溢出隱藏隱藏所有內部,但我有一些可拖動/可排序的元素和高度:100%,因爲我有一個可調整大小的函數,將放大黃色的分區...

+0

是否在'.c2'中設置了'min-height'兩次錯誤? – kei 2012-08-02 16:56:38

+0

對不起,我更新了代碼http://jsfiddle.net/3FepW/3/ – user1502679 2012-08-02 16:59:51

回答

1

問題來自於被稱爲邊緣摺疊的問題。 Chrome和IE正在渲染它。不確定Firefox在做什麼。

這裏有很多關於同樣問題的問題。我在這裏回答了其中之一 - 兄弟姐妹之間的兒童和家長Adding CSS border changes positioning in HTML5 webpage

基本上頂部和底部邊緣,並且崩潰最高的人。您在.c1上輸入的float: left可防止發生這種情況。在.c3margin-bottom卡內.c1,這就是爲什麼它變得更大(即,「這就是爲什麼.c1變大」)。

嘗試增加overflow: auto;.c2 - 防止利潤率從倒塌的另一種方式 - 所以c1的保證金被‘卡住’,而不是.c2 - 我猜想這可能是你在找什麼。

這是小提琴 - >http://jsfiddle.net/joplomacedo/3FepW/5/

+0

你是一個天才!謝啦! :) – user1502679 2012-08-02 17:13:22

+0

;)謝謝。沒問題。我已經更新了我的答案,以提出可能的解決方法。 – banzomaikaka 2012-08-02 17:15:32

+0

這幾乎是字面上的[來自CSS規範的示例](http://www.w3.org/TR/css3-box/#collapsing-margins)(示例XI),並且根據該示例**的這些邊距應該不**崩潰! *「高度爲'auto'且'min-height'小於元素使用高度且'max-height'大於元素使用高度的流入塊級元素的底部邊距與如果元素沒有底部填充或邊框,則它的最後一個流入塊級別的底部邊距「* - 但此處最小高度比所使用的高度大*。 – 2013-06-18 10:00:35

0

.c3中刪除margin-bottom: 10px; - 這是導致此類行爲的原因。據我所知,這個問題通常被稱爲「可摺疊利潤率」,請有人糾正我,如果我錯了。

+0

感謝您的評論,這是這個問題的唯一解決方案?或者有其他的CSS黑客來解決這個..? – user1502679 2012-08-02 17:08:16

+0

看看這個小提琴 - http://jsfiddle.net/skip405/3FepW/4/。我刪除了你的樣式的開頭(基本上刪除'float'屬性就是這樣做的) – skip405 2012-08-02 17:14:44