如何省略显示：父元素上的表在使用display时会影响布局：table-cell hack？

Question

我在某些导航元素as here上使用display: table-cell黑客攻击。以前，我在display: table元素的父元素上使用display: table-cell，并注意到删除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。从您链接到的那个小节中：

  

  

1. 产生失踪的父母：

        
     

   1. 对于连续内部表和“table-caption”兄弟序列中的每个“table-cell”框C，如果C的父级不是“table-row”，则生成匿名“table-row” C周围的框和C的所有连续兄弟姐妹都是“桌子”框。

     

   2. 对于一系列连续的正确表子项中的每个正确的表子C，如果C是错误的，则生成一个匿名的“表”或“内联表”框C围绕C和C的所有连续兄弟适当的桌子。 （如果C的父级是'内联'框，则T必须是'内联表'框;否则它必须是'表'框。）

           
        
      • 如果'table-row'的父级既不是行组合框也不是'table'或'inline-table'框，则它是错误的。
        
     
  

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

由于自动生成匿名表格框，因此并不总是需要设置display: table。只有当table-cell元素由具有布局属性的元素（如浮动，间隙或设置维度（如width: 100%）作为父级时，才需要确保这些属性直接应用于表格框，而不是那些表格框的父母。

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