使用display:table -不包含display:table

Question

我正在尝试使用CSS3创建一个语义正确的HTML5网页。我已经创建了下面的标记，它存在于我的body元素的根部。对aside和section元素应用display:table-cell会使它们按我所希望的那样列。但是，我没有可以应用display:table的包含元素。如果要应用的元素不包含在display:table中，是否可以使用display:table-cell？如果没有，有没有更好的机制来创建包含这些元素而不使用浮动的列布局？

<aside>
    <nav>
       <ul>
           <li><a href="#">Link 1</a></li>
           <li><a href="#">Link 2</a></li>
       </ul>
    </nav>
</aside>
<section>
    Content goes here
</section>

Answer 1

是的，它是有效的。阅读有关匿名表对象的17.2.1 of CSS2 spec。更具体地说，这些部分...

正在生成缺少的子包装：

1. 如果“table”或“inline- table”框的子项C不是真正的表子项，则在C和C的所有连续同级项周围生成一个匿名的“table- row”框，这些同级项不是真正的表子项。
2. 如果行分组框的子项C不是“table-row”框，然后在C和C的所有连续同级中生成匿名的'table-row‘框。
3. 如果'table-row’框的子项C不是'table-cell‘框，则在C和C的所有不是'table-cell’框的连续同级框周围生成匿名的'table-cell‘框。

生成缺少的父级：

_

1. 对于连续的内部表格和‘table -

’兄弟的序列中的每个' table -cell‘框C，如果C的父代不是' table -row’，则在C和作为'table-cell‘框的C的所有连续兄弟项周围生成匿名的'table-row’框。对于连续的适当的表子项序列中的每个适当的表子项C，如果C是错误的父子关系，那么在C周围生成一个匿名的' table‘或'inline-table’框T，C的所有连续兄弟项都是正确的表子项。(如果C的父级是'inline‘框，那么T必须是'inline-table’框；否则它必须是'table‘框。)

- A 'table-row' is   misparented if its parent is neither a   row group box nor a 'table' or   'inline-table' box.
- A 'table-column'   box is misparented if its parent is   neither a 'table-column-group' box nor   a 'table' or 'inline-table' box.
- A row   group box, 'table-column-group' box,   or 'table-caption' box is misparented   if its parent is neither a 'table' box   nor an 'inline-table' box.

​

Answer 2

来自：

17.2.1匿名表对象

HTML以外的文档语言不能包含CSS 2.1表格模型中的所有元素。在这些情况下，必须假定“缺失”的元素才能使表模型正常工作。任何表格元素都会自动在其周围生成必要的匿名表对象，由至少三个对应于' table '/'inline- table‘元素、'table-row’元素和'table-cell‘元素的嵌套对象组成。缺失的元素会生成对象(例如，可视化表格布局中的匿名框)

..。

这意味着，如果我们使用display: table-cell;而没有首先在设置为display: table-row;的块中包含单元格，那么将隐含该行-浏览器将表现得好像声明的行实际上就在那里一样。

所以是的，使用不包含display:table的display:table-cell确实会产生有效的CSS。然而，这并不意味着它的行为是稳定的。即使在今天(2016年2月)，display:table和display:table-cell的行为在不同的浏览器中仍然不一致。有关示例，请参阅。