为什么 Firefox 中表格单元格中 html 按钮的位置不同

Question

当嵌套在带有 display: table-cell 的 li 中时，为什么在 Firefox 和 Chrome/IE 中按钮元素的位置不同？

在 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/