“位置：绝对的;” “底部：0;”而是“position：absolute;”在Firefox中不会粘在容器的底部

Question

以下iScroll演示适用于Safari和Chrome，但不适用于Firefox（我使用的是9.0.1）

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/

Answer 1

您正尝试在XUL框中使用绝对定位。 XUL不支持绝对定位，因此忽略了位置样式。

我建议不要使用display: -moz-box，或者display: -webkit-box或display: box，如果您希望它们的行为相同，那么肯定不会。第一个是XUL盒子，其中第二个是非常早期的CSS3 flexbox草稿（它与XUL盒子完全不同），其中第三个不存在而且永远不会：CSS3 flexbox正在使用{{ 1}}，其行为与display: flexbox和-moz-box完全不同。

Answer 2

这对我来说似乎是个错误。出于某种原因，nav和article虽然设置为bottom: 0;，但计算为bottom: 298px;，实际上将其设置为header元素的底部，而非而不是与relative定位容器的底部对齐。

我不知道为什么。再说一遍，我可以说它是一个错误。