Display Table Cell inconsistency.

Question

Hey I was wondering why this happens:

http://jsfiddle.net/dSVGF/

The buttons do not fill the container yet the anchors do. What is fundamentally different between the two tags stylistically?

<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;
}

Answer 1

I suppose that the fundamental difference between these elements is that <button> is treated as replaced element (at least by some browsers), and is rendered with the help of non-CSS browser built-in mechanisms. There are several issues in Bugzilla about the rendering limitations of buttons caused by this (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=733914).

IE9+ and Opera seem not to treat <button> as a replaced element, which seems more correct according to the latest HTML spec, but is still rather unclear in CSS.

Answer 2

Whether or not a button tag actually accepts "display: table-cell" is dependent on the browser, apparently. I ran a quick check in Chrome developer tools: In the calculated styles, the display on the buttons was set to inline-block. When I tried the same in IE10, it accepted the change and the buttons actually sized as table cells.