为什么这两个代码段使用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）确实支持将渲染按钮作为表格单元格显示。