Random Firefox Issue when using display: table

The visual goal we are trying to achieve is a horizontal menu where some links may span multiple lines but all the links should be centered vertically.

In compliant browsers, this can be achieved via CSS using display: table. Sample markup:

<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;
}

This works. Most of the time. What's happening though is that for some people, using some version of firefox 3.x on Windows or OSX, sometimes on initial page load, the LIs will wrap below others.

A page reload fixes the issue 99% of the time.

The bug is hard to reproduce. It seems random, at best. I can't make it happen at all on my XP machine, but can get it to pop up once in a while on my OSX machine.

Visual example:

what we want:

link 1      link 2      link 3      link 4

wha开发者_JAVA百科t we get sometimes:

link 1      link 2      link 3
link 4

I can't find much reference to this issue, though I did come across this mention here that might be related:

CSS menu broken in Firefox (display:table-cell;)

Has anyone encountered this and/or know what might be causing it?

If the users are using Firefox 3.5 or earlier then you're probably running into https://bugzilla.mozilla.org/show_bug.cgi?id=148810 if an HTTP packet break happens to come in the middle of the table.

You can work around that by toggling the display on the table to 'none' in your onload handler, flushing out layout (e.g. by doing document.body.offsetWidth) and then setting the display back to "" or "table".... It's not pretty, but it would work.

Of course anything you can do to get your users to upgrade from ancient Firefox versions would be good for both them and you. ;)