css - 怎么漏掉显示:table on the parent element affect layout when using the display:table-cell hack?

Question

我在一些导航元素上使用了 display: table-cell hack，as here .以前，我在包含 display: table-cell 元素的父元素上使用了 display: table，并注意到删除 display: table 不影响布局。我咨询了W3C docs ，我仍然不清楚 display: table 除了允许垂直和水平居中或 content re-ordering 之外还有什么作用.

当使用 display: table-cell hack 时，是否最好在父元素上声明规则 display: table？如果不是，这对旧版浏览器中的布局有何影响？

Answer 1

当您不将 display: table 分配给 display: table-cell 元素的祖先时，它会创建一个 anonymous table (and table row) wrapper视情况在细胞周围。从您链接到的那个小节:

3. Generate missing parents:

   1. For each 'table-cell' box C in a sequence of consecutive internal table and 'table-caption' siblings, if C's parent is not a 'table-row' then generate an anonymous 'table-row' box around C and all consecutive siblings of C that are 'table-cell' boxes.

   2. For each proper table child C in a sequence of consecutive proper table children, if C is misparented then generate an anonymous 'table' or 'inline-table' box T around C and all consecutive siblings of C that are proper table children. (If C's parent is an 'inline' box, then T must be an 'inline-table' box; otherwise it must be a 'table' box.)

      • A 'table-row' is misparented if its parent is neither a row group box nor a 'table' or 'inline-table' box.

这些匿名框不能通过 CSS 通常定位，也不能通过匿名来控制创建它们的方式和位置。您也不能让它们从父元素继承任何非继承的样式。

因为匿名表格框是自动生成的，所以并不总是需要设置display: table。仅当您的表格单元格元素由具有布局属性(例如 float 、间隙或设置尺寸(如 width: 100%)的元素作为父级时才有必要，并且您需要确保这些属性直接应用于表格框，而不是那些表格框的父级。

我不知道在实现 display: table 等的旧浏览器中有任何重大布局问题。