「位置：絕對;」與「底部：0;」而不是「位置：絕對的」不會粘到容器底部在Firefox

在Safari和Chrome以下iScroll演示作品，但不能在Firefox（我使用9.0.1）「位置：絕對;」與「底部：0;」而不是「位置：絕對的」不會粘到容器底部在Firefox

http://cubiq.org/dropbox/iscroll4/examples/ipad/

我用盡了一切我可以考慮嘗試解決這個問題，我也研究過關於這個問題的其他問題，比如這個問題。到目前爲止沒有任何工作。 DIV with "position:absolute;bottom:0" doesn't stick to the bottom of the container in Firefox

這裏有幾點看法我做：

添加類似bottom:-300px到nav和article使背景表演。我無法解釋爲什麼。
將height:100%添加到nav和article使背景顯示在與兄弟頭部相同的高度。
該問題與iScroll無關。您可以從javascript中註釋掉iScroll實例化，而HTML/CSS本身在Firefox中不起作用，但可以在Safari和Chrome中使用。

任何人有什麼想法？

這裏有一個的jsfiddle救人時間： http://jsfiddle.net/aQf7Y/

來源

2012-02-17 Andrew De Andrade

Mootools沒有被使用。這只是jsFiddle的默認框架，我沒有去改變它。它沒有被用在上面的小提琴中。 – 2012-02-17 05:14:49

似乎是'display：-moz-box'的一個問題 – mowwwalker 2012-02-17 05:45:49

我會盡量少用非標準的東西，因爲我可以逃避自己。它簡化了生活... – 2012-02-17 19:58:09

這似乎是我的錯誤。由於某些原因，nav和article（儘管設置爲bottom: 0;）計算爲bottom: 298px;，實際上它將其設置爲header元素的底部，而不是與定位容器的底部對齊。

我不知道爲什麼。再次，最好的我可以告訴它是一個錯誤。

來源

2012-02-17 05:13:27 ScottS

繼續並註釋掉Javascript，你會發現它在Firefox和Safari瀏覽器中的表現仍然不同。這不是一個JavaScript問題，我只是將Javascript留在他們的維護中以保留原始用例的保真度，以防有人可以爲正在嘗試完成的任務提供替代解決方案。我希望這不是一個錯誤，但我相信你可能是對的。 – 2012-02-17 05:17:25

其實，我不知道我爲什麼提到腳本。我已經注意到它通過關閉它不是JavaScript。我覺得我很累（當我回答時，已經過了午夜）。我將在我的答案中刪除javascript評論。 – ScottS 2012-02-17 13:05:27

您試圖在XUL框中使用絕對定位。絕對定位在XUL中不受支持，所以位置樣式簡單地被忽略。

我建議不要使用display: -moz-box或display: -webkit-box或display: box，如果您希望它們的行爲相同，則不會這樣做。其中第一個是XUL盒，第二個是早期的CSS3 flexbox草稿（與XUL盒完全不同），其中第三個不存在，永遠不會：CSS3 flexbox使用display: flexbox，其行爲與-moz-box和-webkit-box的行爲完全不同。

來源

2012-02-17 16:13:25

太棒了。對這些新規格不太瞭解。完全放棄所有這些CSS3特性是最好的，還是在那裏存在一個或兩個規則？ – 2012-02-17 18:04:22

「位置：絕對;」與「底部：0;」而不是「位置：絕對的」不會粘到容器底部在Firefox

回答

相關問題