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

Question

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

• 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 被替换为 （输入也显示相同的行为）。两者都应该呈现为包装在匿名表格行中的表格单元格，我认为它应该看起来像第一个 sn-p 无论如何。我必须遗漏一些明显的东西来解释这种差异，所以谁能解释为什么这两个 sn-ps 呈现不同？

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

编辑：如果您将 L 和 R 元素限制为固定大小，并且将整个行设置为 100%，则 M/中间单元格应扩展以适应整个宽度，但它不起作用预计在 Chrome 中。由于某些莫名其妙的原因，这两个 sn-ps 的呈现方式也不同：

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

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

Answer 1

这种按钮行为是影响两个浏览器（issue for Chrome 和for Firefox）的已知问题。两家厂商给出的解释是按钮的特殊渲染，因为它们作为表单元素的性质。两家供应商都没有计划解决这个问题，至少在 css-display-3 和/或 css-tables-3 规范成熟之前不会。

正如您所观察到的，Edge 会按预期呈现您的 sn-ps，因为 Edge（实际上是 IE11）确实支持将按钮呈现为表格单元格。