Почему позиция кнопки html в tablecell разная в Firefox

Question

Почему позиция элемента кнопки отличается в Firefox против Chrome/IE, когда она вложена внутри li с дисплеем: table-cell?

В Chrome и IE кнопка выровнена в верхней части ячейки, а в Firefox - в нижней части. Может ли это повлиять на Firefox, чтобы вести себя как в Chrome?

Я создал скрипку на 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

Просто добавьте vertical-align:top к table-cell; http://jsfiddle.net/1kg8a6rb/1/