“位置：绝对;”与“底部：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

回答

相关问题