Html 为什么这两个代码段使用display:table/table cell/table row呈现方式不同？

在使用display:table/table row/table cell编写一些CSS时，我遇到了一些我不理解的行为，但在Chrome和Firefox中是一致的。我将其简化为以下两个片段，以突出区别：

样式规则非常简单：

* { 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>

L
R

第二个链接中唯一的区别是最后一个带有R的div被替换为（输入也显示相同的行为）。两者都应该呈现为包装在匿名表行中的表单元，我认为不管怎样，它都应该看起来像第一个代码片段。我肯定遗漏了一些明显的东西来解释这种差异，那么有人能解释为什么这两个片段呈现的不同吗

有趣的是，Edge渲染的效果与我最初预期的完全相同

编辑：如果将L和R元素约束为固定大小，并且将行作为一个整体设置为100%，则M/中间单元格应展开以适应整个宽度，但在Chrome中也无法按预期工作。出于某些无法解释的原因，这两个片段的呈现方式也有所不同：

---

似乎只有当用作表单元格的所有元素都是div时，呈现才会一致地工作，例如：

按钮的这种行为是影响浏览器（和）的已知问题。这两个供应商给出的解释是由于按钮作为表单元素的性质而对其进行的特殊渲染。两家供应商都没有计划解决这个问题，至少在css-display-3和/或css-tables-3规范成熟之前是这样

---

正如您所观察到的，Edge按预期呈现代码片段，因为Edge（事实上IE11）确实支持将按钮呈现为表格单元格。

考虑使用flexbox而不是表格。我99%确定它没有这种问题汉克斯，这太烦人了。我原以为display:table在不同的浏览器中是相对一致的，但css被搞砸的方式似乎永无止境。恕我直言，这才是真正让网络成为集群的东西。@naasking:display:table可能是所有CSS中最糟糕的部分。太糟糕了。相比之下，它的其余部分则相当平淡：Psigh，我有一些希望，因为它在大多数情况下似乎工作得很好，而display:table似乎是唯一普遍可用的垂直居中显示项目的显示模式。如果FF和Chrome在表格显示模式下只是在任何输入元素周围插入一个匿名div，那么它们将与预期的工作方式一致。看起来一点也不难解决，但你暗示有其他龙潜伏在这里，所以回到绘图板上，我想。。。