Случайный Firefox Проблема при использовании дисплея: таблица

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 menu broken in Firefox (display:table-cell;)

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

Answer 1

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

Вы можете обойти это, переключив отображение на столе в «none» в обработчике onload, вымывая макет (например, выполнив document.body.offsetWidth), а затем вернув дисплей в «» или «таблицу» ... Это некрасиво, но это сработает.

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