Центрированный 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 также имеет некоторые проблемы с применением определенных правил для вставляемого контента. К счастью, существует более интуитивно понятный способ кодирования этой страницы, который также используется для работы .

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

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

Answer 2

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

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

Answer 3

Похоже, вы помещаете inline-table внутри table, а table-cell внутри table-row без display: table*. Поскольку это недопустимо, может произойти любое случайное поведение браузера.

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