css3 Flexbox горизонтальной выравнивание по абсолютному DIV

Question

У меня есть абсолютный расположенный DIV с display: box

В Chrome он работает прекрасно, дети сНа выравнивания по горизонтали, но в Firefox не похож на работу.

Если я удалю position: absolute, он отлично работает в обоих браузерах, но мне это нужно.

Пример: http://dabblet.com/gist/1716069

Answer 1

Экспериментальные типы дисплеев, которые вы используете в виду совершенно разные вещи, и ни один из них не соответствует display: box по той простой причине, что эта последняя не существует и никогда не будет (СМЧ спецификации будет используя display: flexbox, с совершенно другим поведением со всех префиксных «ящиков», все из которых имеют очень различное поведение друг от друга).

Поскольку они означают разные вещи, браузеры обрабатывают раздел CSS, в котором говорится, что абсолютно позиционированные элементы имеют свои значения отображения, измененные на block или table несколько иначе. Gecko меняет -moz-box на block. WebKit не изменяет -webkit-box на что-либо еще.

Предлагаю не использовать экспериментальные типы дисплеев, которые исчезнут в недалеком будущем. Если вы используете , то должны использовать их, возможно, вы захотите обернуть блок вокруг своего «ящика» и поместить этот блок.