Центрированный UL не будет расширяться по горизонтали в Firefox / Opera (работает в Safari, IE6 / 7/8)
У меня есть центрированная 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
Ответы 3
Я не могу дать вам реального ответа, но поскольку никто не ответил ... Я просмотрел его в Firebug (в Firefox 3.01), и когда я изменил стиль CSS #rounds li на что-то еще, скажем, встроенный, а затем обратно на inline-table, раскладка исправилась сама собой. Итак, похоже, что ваши правила CSS в порядке, и что проблема связана с тем, что дополнительный элемент списка вставляется через Javascript. Я также проверил это, избавившись от JQuery и вставив сценарий W3C DOM, чтобы сделать то же самое, и, конечно же, ту же проблему.
Мне интересно, могли ли вы найти ошибку в Firefox (и, я думаю, в Opera), где страница не перекомпилируется должным образом, когда что-то вставляется через Javascript.
Типы дисплеев table-* все еще недостаточно определены, поэтому неудивительно, что здесь вы получаете другое поведение. По моему опыту, у FF также есть некоторые проблемы с применением определенных правил к вставляемому контенту. К счастью, есть более интуитивно понятный способ кодирования этой страницы, который также случается с Работа.
Вместо того, чтобы настраивать <ul/> на display:table, оставьте его как display:block (по умолчанию) и присвойте ему text-align:center. На самом деле вас не волнует, что <ul/> сжимает встроенные таблицы в этом случае (что является чистым результатом, которого достигает ваш код), вы просто хотите, чтобы сами таблицы были центрированы.
В качестве бонуса это позволяет вам удалить упаковку <div/>, поскольку она служит только для того, чтобы обеспечить границу, от которой можно оттолкнуть поля <ul/>. Поскольку вы больше не используете эти поля, вы можете просто использовать <ul/> в качестве содержащего блока и вместо этого указать ему границу.
Кажется, вы помещаете inline-table в table, а table-cell в table без какого-либо table-row. Поскольку это недопустимо, может произойти любое случайное поведение браузера.
В любом случае display: table* плохо поддерживается (особенно в IE). Если вам нужна разметка стола сегодня, лучше всего придерживаться настоящих таблиц. Не совсем уверен, чего вы пытаетесь достичь; как предполагает Ксантир, существуют более простые способы достижения простого центрирования.
Такое простое решение! Я работал с кодом, который кто-то другой генерирует с помощью Dojo, и боролся с его автоматически применяемыми встроенными стилями, поэтому, думаю, я был слишком агрессивен. Спасибо!