為什么這兩個代碼段使用display：table / table-cell / table-row呈現不同的顯示？

Question

在使用display編寫一些CSS時：table / table-row / table-cell，我遇到了一些我不了解的行為，但是在Chrome和Firefox中是一致的。 我將其簡化為以下兩個片段，以突出說明差異：

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

樣式規則非常簡單：

* { 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%; }

的HTML是難看的：

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

第二個鏈接中的唯一區別是帶有R的最后一個div被<button>替換（輸入也顯示相同的行為）。 兩者都應呈現為包裹在匿名表行中的表單元格，並且我認為無論如何它都應該看起來像第一個代碼段。 我必須缺少一些明顯的東西來解釋這種差異，所以誰能解釋為什么這兩個片段呈現的方式不同？

有趣的是，Edge使它們與我最初期望的完全相同。

編輯：如果將L和R元素限制為固定大小，並且將行整體設置為100％，則M /中間單元格應該擴展為適合整個寬度，但是在任何情況下都不能正常鉻。 由於某些無法解釋的原因，這兩個摘要的呈現方式也有所不同：

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

似乎僅當用作表單元的所有元素都是div時，渲染才能始終如一地工作，例如： https : //codepen.io/anon/pen/mxKreZ

Answer 1

帶有按鈕的行為是影響兩個瀏覽器的已知問題（ Chrome和Firefox的問題 ）。 兩家供應商給出的解釋是按鈕的特殊渲染，因為它們具有表單元素的性質。 兩家供應商都沒有計划解決此問題，至少直到css-display-3和/或css-tables-3規范成熟為止。

如您所見，Edge可以按預期方式渲染您的代碼片段，因為Edge（實際上是IE11）確實支持將渲染按鈕作為表格單元格顯示。