Случайная проблема Firefox при использовании display: table

Question

Визуальная цель, которую мы пытаемся достичь, - это горизонтальное меню, в котором некоторые ссылки могут занимать несколько строк, но все ссылки должны располагаться по центру по вертикали.

В совместимых браузерах это может быть достигнуто с помощью CSS с помощью display: table. Образец разметки:

<ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link<br />spanning lines</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS:

ul {
    display: table
}

ul li {
    display:table-cell;
    vertical-align:middle;
}

ul li a {
    display: block;
}

Это работает. Большую часть времени. Однако происходит то, что для некоторых людей, использующих некоторые версии Firefox 3.x для Windows или OSX, иногда при начальной загрузке страницы, LI будут оборачиваться ниже других.

Перезагрузка страницы устраняет проблему в 99% случаев.

Ошибка трудно воспроизвести. В лучшем случае кажется случайным. Я вообще не могу этого сделать на своей машине с XP, но могу заставить ее иногда появляться на моей машине с OSX.

Визуальный пример:

что мы хотим:

link 1      link 2      link 3      link 4

что мы иногда получаем:

link 1      link 2      link 3
link 4

Я не могу найти много ссылок на эту проблему, хотя я встречал здесь упоминание, которое может быть связано:

Меню CSS не работает в Firefox (отображение: ячейка таблицы;)

Кто-нибудь сталкивался с этим и / или знает, что может быть причиной?

Answer 1

Если пользователи используют Firefox 3.5 или более раннюю версию, вы, вероятно, столкнетесь с https://bugzilla.mozilla.org/show_bug.cgi?id=148810, если в середине таблицы произойдет разрыв пакета HTTP.

Вы можете обойти это, переключив отображение на столе на 'none' в вашем обработчике загрузки, сбросив компоновку (например, выполнив document.body.offsetWidth), а затем вернув дисплей на "" или "table" .. .. Это не красиво, но это будет работать.

Конечно, все, что вы можете сделать, чтобы пользователи обновились с древних версий Firefox, подойдет и им, и вам. ;)