«Позицию: абсолютная;» с "дном: 0;" вместо "позиция: абсолютная;" не прилипает к дну контейнера в Firefox

Question

Следующая демонстрация iScroll работает в Safari и Chrome, но не в Firefox (я использую 9.0.1)

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

Я перепробовал все, что мог придуматьчтобы попытаться решить эту проблему, и я посмотрел на другие вопросы по этой же проблеме, такие как этот вопрос.Пока ничего не получалось. DIV с "position: absolute; bottom: 0" не привязывается к дну контейнера в Firefox

Вот несколько наблюдений, которые я сделал:

• Добавление чего-то вроде bottom:-300px к nav и article делает фоновое шоу.Я не могу понять, почему.
• При добавлении height:100% к nav и article фон отображается на той же высоте, что и заголовок брата.
• Проблема не зависит отiScroll.Вы можете закомментировать экземпляр iScroll из javascript, и только 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 использует display: flexbox, который ведет себя совершенно иначе, чем -moz-box и -webkit-box.

Answer 2

Мне кажется, это ошибка.По какой-то причине nav и article, хотя и установлены на bottom: 0;, вычисляют на bottom: 298px;, что фактически устанавливает его в нижней части элемента header, а не выравнивается с нижней частью relativeпозиционированный контейнер.

Понятия не имею почему.Опять же, насколько я могу судить, это ошибка.