显示表格单元格不一致。

嘿，我想知道为什么会发生这种情况：

http://jsfiddle.net/dSVGF/ http://jsfiddle.net/dSVGF/

按钮尚未填充容器 锚确实如此。有什么本质上的不同 两个标签之间的风格？

<div class="table">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
</div>

<div class="table">
    <button href="#">A</button>
    <button href="#">B</button>
    <button href="#">C</button>
</div>


.table {
    display: table;
    width: 100%;
    outline: 1px solid red;
}

.table > * {
    display: table-cell;
    outline: 1px solid lightgreen;
}

我认为这些元素之间的根本区别在于<button>被视为替换元素（至少对于某些浏览器而言），并在非 CSS 浏览器内置机制的帮助下呈现。 Bugzilla 中存在几个关于由此导致的按钮渲染限制的问题（例如https://bugzilla.mozilla.org/show_bug.cgi?id=733914 https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9+和Opera好像不可以对待<button>作为替换元素，根据最新的说法，这似乎更正确HTML 规范 http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#replaced-elements，但在 CSS 中仍然相当不清楚。