Question

在使用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>

第二个链接的唯一区别是带有R的最后一个div被替换为＆lt; button＆gt; （输入也显示相同的行为）。两者都应该呈现为包含在匿名表行中的表格单元格，我认为它应该看起来像第一个代码段。我必须遗漏一些明显的东西来解释这种差异，那么有谁可以解释为什么这两个片段呈现不同？

有趣的是，Edge使它们与我最初的预期完全相同。

编辑：如果将L和R元素约束为固定大小，并将整个行设置为100％，则M / middle单元格应扩展以适合整个宽度，但它不会在Chrome中按预期工作。由于一些莫名其妙的原因，这两个片段的呈现方式也不同：

如果用作表格单元格的所有元素都是div，那么渲染似乎只能保持一致：https://codepen.io/anon/pen/mxKreZ

Answer 1

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

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

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

1 个答案: