html - 为什么 html 按钮在 tablecell 中的位置在 Firefox 中不同

Question

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

在 Chrome 和 IE 中，按钮与单元格的顶部对齐，而在 Firefox 中，它与底部对齐。这会在 Firefox 中受到影响，使其表现得像在 Chrome 中一样吗？

我在 http://jsfiddle.net/1kg8a6rb/ 上创建了一个 fiddle

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/