Центрированный UL не будет расширяться по горизонтали в Firefox / Opera (работает в Safari, IE6 / 7/8)

Question

У меня есть ul по центру (стилизованный под таблицу ala cssplay), к которому после рендеринга страницы добавлены элементы li, и, кажется, он прекрасно работает во всех, кроме Firefox и Opera.

Желаемый эффект - центрировать ряд элементов li, даже если их всего один или два. Этот пример моделирует проблему с jQuery, добавляющим li через две секунды после того, как страница готова.

По какой-то причине кажется, что Firefox 3.05 и Opera 9.63 сохраняют ul на начальной ширине рисования после добавления третьего li, даже если в CSS не указано ни одной ширины.

Это, конечно, абсолютно убивает меня, и любая помощь будет признательна.

http://deadguy.reliccommunity.com/stuffbox/testinggrounds/display-table.html

Answer 1

Типы отображения table-* все еще недостаточно определены, и поэтому неудивительно, что у вас здесь другое поведение. По моему опыту, FF также имеет некоторые проблемы с применением определенных правил для вставляемого контента. К счастью, есть более интуитивный способ кодирования этой страницы, который также происходит с work .

Вместо установки <ul/> на display:table, оставьте его как display:block (по умолчанию) и присвойте ему text-align:center. На самом деле вас не волнует, что <ul/> сжимает встроенные таблицы в этом случае (что является чистым результатом, которого достигает ваш код), вы просто хотите, чтобы сами таблицы были центрированы.

В качестве бонуса, это позволяет вам убрать обтекание <div/>, так как оно только там, чтобы обеспечить границу для полей <ul/>, с которой нужно отталкиваться. Поскольку вы больше не используете эти поля, вы можете просто использовать <ul/> в качестве содержащего блока и вместо этого задать ему границу.

Answer 2

Вы, кажется, помещаете inline-table внутри table и table-cell с table без table-row. Так как это неверно, может произойти любое случайное поведение браузера.

В любом случае display: table* плохо поддерживается (особенно в IE). Если вы хотите сегодня раскладку таблиц, лучше придерживаться реальных таблиц. Не совсем уверен, что вы пытаетесь достичь; как полагает Ксантир, существуют более простые способы достижения простого центрирования.

Answer 3

Я не могу дать вам реальный ответ, но поскольку никто больше не ответил ... Я пробежал по нему в Firebug (в Firefox 3.01), и когда я изменил стиль CSS #rounds li на что-то другое, скажем встроенный, затем обратно к встроенной таблице, раскладка себя исправила. Таким образом, похоже, что ваши CSS-правила в порядке, и что проблема связана с тем, что дополнительный элемент списка вставляется через Javascript. Я также проверил это, избавившись от JQuery и вставив сценарий W3C DOM, чтобы сделать то же самое и, конечно же, ту же проблему.

Мне интересно, возможно, вы нашли ошибку в Firefox (и, я думаю, в Opera), когда страница не обновляется должным образом при вставке вещей через Javascript.