Маржа: авто не работает, если в Firefox отображается поле

Question

В Firefox (версия 8.0), если я указываю элемент для display: -moz-box и margin: auto, элемент больше не помещается в центр его родительского элемента.Работает в Chrome.Это проблема Firefox или я что-то упустил?Как я могу решить эту проблему?

Одним из обходных путей может быть добавление элемента-оболочки div и установка его display как block, но это ужасно.

Answer 1

-moz-box - это тип отображения для блоков XUL в Firefox. Они не следуют обычной блочной модели CSS, поэтому не используйте автоцентр при использовании авто полей. Таким образом, поведение здесь в Firefox является правильным: это просто поведение блоков XUL.

Обратите внимание, что -webkit-box (что, я полагаю, означает то, что вы имели в виду под "работами в Chrome") - это совершенно другое: это реализация одного из самых ранних проектов CSS flexbox. Он имеет некоторые поверхностные особенности с -moz-box и в этом отношении с текущими черновиками flexbox, но в остальном совершенно другой.

Теперь реальный вопрос ... что вы на самом деле пытаетесь сделать?

Answer 2

Я создал минимальный пример и протестировал его под Firefox 7.0.1 unde ubuntu:

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:block; margin:auto;width:100px;height:50px;">display: block</div>
</div>

<div style="border:1px solid blue;width:200px;height:200px;float:left">
<div style="display:-moz-box; margin:auto;width:100px;height:50px;">display: -moz-box</div>
</div>

Результат ниже. Надеюсь, эта информация поможет вам.

Answer 3

Согласно официальной спецификации W3C margin: auto; должно воздействовать на flex элементы так же, как оно воздействует на block элементы. Реализация Firefox является ранней, которая в настоящее время не соответствует спецификации. Мне сообщили, что новая версия появится около версии 18.