使用display:table/table-row/table-cell时两段代码渲染为何不同？

我来帮你拆解这个布局问题——你观察到Chrome和Firefox表现一致的这个现象，其实是严格遵循CSS表格布局规范的结果，咱们一步步理清楚：

核心场景对比 #

先把你简化的两个核心样式逻辑补全（对应你提到的两个示例）：

1. .stack 堆叠布局 #

* { box-sizing: border-box; border: none; margin: 0; }
.stack { width: 100%; display: table; }
.stack > * { display: table-row; }

对应的HTML是多个直接子元素被设为table-row，最终呈现垂直堆叠的效果。

2. .flow 流式布局 #

* { box-sizing: border-box; border: none; margin: 0; }
.flow { width: 100%; display: table; }
.flow > * { display: table-cell; }

对应的HTML是多个直接子元素被设为table-cell，最终呈现水平排列的效果。

为什么会有这种差异？ #

CSS表格布局完全复刻了HTML原生表格的结构逻辑，这是关键：

• 当容器是display: table，直接子元素设为display: table-row时：
  每个table-row会自动生成隐含的table-cell容器来包裹内部内容（就像HTML里<tr>必须搭配<td>才能生效一样），而且每行独占一行垂直空间，所以子元素会从上到下堆叠。
• 当容器是display: table，直接子元素设为display: table-cell时：
  这些table-cell会被自动归到同一个隐含的table-row容器中（除非你手动添加table-row父元素），所以它们会在同一行内水平排列。

Chrome和Firefox都严格执行了CSS 2.1表格布局的规范，所以才会表现出完全一致的行为，这种隐含元素的生成是规范强制要求的，目的是让CSS表格布局和HTML表格的结构逻辑对齐。

调整效果的小技巧 #

如果想让.flow也实现堆叠效果，只需要给每个table-cell外层套一个display: table-row的容器：

<div class="flow">
  <div style="display: table-row">
    <div>第一块内容</div>
  </div>
  <div style="display: table-row">
    <div>第二块内容</div>
  </div>
</div>

反过来，如果想让.stack实现水平排列，把table-row改成table-cell即可，它们会自动被归到同一行。

内容的提问来源于stack exchange，提问作者naasking