Random Firefox Issue when using display: table

Question

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

what 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:

http://stackoverflow.com/questions/605967/css-menu-broken-in-firefox-displaytable-cell/2692897#2692897

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