Question

为什么第一个表中的空无序列表会将另一个'table-cell'中的列表推下来？

HTML

<div class="table">
    <div class="table-row">
        <div class="table-cell">
            <div>
                <ol>
                    <li>an item</li>
                </ol>
            </div>
        </div>
        <div class="table-cell">
            <div>
                <ol>
                </ol>
            </div>
        </div>
    </div>
</div>

CSS

.table {
  display: table;
  width:100%;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}

.table-cell > div {
  border: 1px solid blue;
  height: 100px;
}

.table-cell ol {
  border: 1px solid black;
}

http://jsfiddle.net/facboy/7bs4xopg/的完整示例。填充两个列表的第二个表是我期望布局看起来的方式

显然我可能没有空<ol>而效果会相同，但我很好奇。

Answer 1

这是因为您的单元格的垂直对齐默认设置为baseline（正如您在屏幕截图中的绿线所示）

enter image description here

因此将vertical-align: top添加到.table-cell

.table-cell {
   ...
   vertical-align: top;  
}

福克：http://jsfiddle.net/b86qyzc5/

Answer 2

这是由于表格单元格中的基线是如何计算的，具体取决于它们是否具有内联内容。 spec非常好地总结了它：

单元格的基线是单元格中第一个流入line box的基线，或单元格中的第一个流入表格行的基线，以先到者为准。如果没有这样的行框或表格行，则基线是单元格框内容边缘的底部。

由于您的表格单元格及其所有后代都没有文本，因此它不会生成任何行框。空单元格中唯一的其他框分别是由内部<div>和<ol>生成的块框。这些方框最外面的底部成为基线。

然后将此基线与其他单元格中的文本对齐，而不会实际影响该单元格的内部布局。这会导致单元格被按下。

请注意，单独使用<ol>不会产生预期效果，因为内部<div>仍将劫持表格单元格的基线。单元格必须是完全空的，或者至少，其内容必须为零高度。

空的有序列表混乱了CSS表格布局

2 个答案: