为什么这两个片段使用 display:table/table-cell/table-row 呈现不同？

Question

在使用 display: table/table-row/table-cell 编写一些 CSS 时，我 运行 出现了一些我不理解的行为，但在 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>

第二个 link 的唯一区别是最后一个带有 R 的 div 被替换为 （输入也显示相同的行为）。两者都应呈现为包裹在匿名 table 行中的 table-cell，而且我认为无论如何它都应该看起来像第一个片段。我一定遗漏了一些明显的东西来解释这种差异，所以谁能解释为什么这两个片段呈现不同？

有趣的是，Edge 渲染它们与我最初预期的完全一样。

编辑：如果您将 L 和 R 元素限制为固定大小，并且整行设置为 100%，M/middle 单元格应展开以适应整个宽度，但它不会' 在 Chrome 中按预期工作。由于某些莫名其妙的原因，这两个片段也呈现不同：

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

似乎只有当所有用作 table-cell 的元素都是 div 时，渲染才能始终如一地工作，如下所示：https://codepen.io/anon/pen/mxKreZ

Answer 1

按钮的这种行为是影响两种浏览器的已知问题 (issue for Chrome and for Firefox)。两家供应商给出的解释是按钮的特殊呈现是由于它们作为表单元素的性质。两家供应商都没有解决这个问题的计划，至少在 css-display-3 and/or css-tables-3 规范成熟之前是这样。

如您所见，Edge 会按预期呈现您的代码段，因为 Edge（实际上是 IE11）确实支持将按钮呈现为 table-cells。