为什么这两个代码段使用display：table / table-cell / table-row呈现不同的显示？

Question

In writing some CSS using display: table/table-row/table-cell, I ran into some behaviour I don't understand, but is consistent across Chrome and Firefox. I reduced it to the following two snippets highlighting the difference:

• https://codepen.io/anon/pen/YavWJJ
• https://codepen.io/anon/pen/XEYKxg

The styling rules are very simple:

* { box-sizing: border-box; border: none; margin: 0; }
.stack, .flow {
    width: 100%;
    display: table;
}
.stack > * {
    display: table-row;
}
.flow > * {
    display: table-cell;
}
.w-100 { width: 100%; }

The html is rougly:

<div class="flow">
  <div>L</div>
  <input type="text"class="w-100" placeholder="M" />
  <div>R</div>
</div>

The only difference in the second link is that the last div with the R is replaced by <button> (input also shows the same behaviour). Both should render as a table-cell wrapped in an anonymous table-row, and I think it should look like the first snippet regardless. I must be missing something obvious to explain this difference, so can anyone explain why these two snippets render differently?

Interestingly enough, Edge renders them exactly the same as I initially expected.

Edit: If you constrain the L and R elements to be fixed size, and the row as a whole is set to 100%, the M/middle cell should expand to fit the whole width, but it doesn't work as expected either in Chrome. These two snippets are also rendered differently for some inexplicable reason:

• https://codepen.io/anon/pen/aYKmbY
• https://codepen.io/anon/pen/PRaGoY

It seems the rendering only works consistently if all of the elements used as table-cell are divs, like so: https://codepen.io/anon/pen/mxKreZ

Answer 1

This behavior with buttons is a known issue affecting both browsers ( issue for Chrome and for Firefox ). The explanation given by both vendors is the special rendering of buttons owing to their nature as form elements. There are no plans by either vendor to fix this, at least not until the css-display-3 and/or css-tables-3 specs have matured.

As you've observed, Edge renders your snippets as expected, because Edge (and in fact IE11) does support rendering buttons as table-cells.