Why is position of html button in tablecell different in Firefox

Question

Why is the position of a button element different in Firefox vs Chrome/IE when nested inside a li with display: table-cell?

In Chrome and IE the button is aligned to the top of the cell while in Firefox it is aligned to the bottom. Can this be influenced in Firefox to behave like in Chrome?

I've created a fiddle on http://jsfiddle.net/1kg8a6rb/

Html:

<ul>    
    <li><button><span>Some longer text</span></button></li>
    <li><button><span>Some much longer text</span></button></li>
    <li><button><span>Some text much much more longer text</span></button></li>
    <li><button><span>Some text</span></button></li>
    <li><button><span>Some text</span></button></li>
</ul>

Css:

ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}
li {
    display: table-cell;
    text-align: center;
}

Answer 1

Just add vertical-align:top to the table-cell; http://jsfiddle.net/1kg8a6rb/1/