html - CSS显示table-caption导致垂直布局

Question

#container {
  width: 960px;
  height: 960px;
  background-color: #ccc;
}
.box {
  width: 300px;
  height: 300px;
  background-color: blue;
  display: table-caption;
  border: 0;
}

<div id='container'>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
  <span class='box'>Content</span>
</div>

Table Caption Fiddle Demo

现在，当我将 table-caption 更改为 table-cell 时，它会水平呈现。下面是它的演示。

Table Cell Fiddle Demo

造成不同渲染效果的原因是什么？

Answer 1

这是规范中关于 display: table-caption 的内容。 :

table-caption (In HTML: CAPTION)

Specifies a caption for the table. All elements with 'display: table-caption' must be rendered, as described in section 17.4.

这就是 section 17.4 的内容关于标题框渲染的说明:

The caption boxes are block-level boxes that retain their own content, padding, margin, and border areas, and are rendered as normal block boxes inside the table wrapper box.

关键部分是它们被渲染为普通的 block 框，因此它们每个都显示在另一个下面(就像在它们自己的行中一样)。

---

其他需要注意的点:(评论中我与 GCyrillus 讨论的总结)

• 子容器不需要具有 display: table 的父容器即可具有 display: table-cell 或 display: table-caption。您可以在 this SO thread 中找到更多详细信息并引用规范的相关部分。
• 理想情况下，每个表格只有一个标题。用户代理可能不希望在同一个父/表下提供多个标题，这可能解释了为什么 Firefox 的渲染方式与 Chrome 不同。但有关详细信息超出了本答案的范围(在我看来)，因为问题仅询问为什么 display: table-caption 导致垂直布局。
• 我同意 GCyrillus，在同一父元素下的多个元素上使用 display: table-caption 绝对是不好的做法。我相信您在尝试学习的过程中不断尝试和犯错。