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

Question

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

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

上创建了 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/

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

Why is position of html button in tablecell different in Firefox

html

css

firefox

cross-browser