为什么在表格单元格内显示:内联块会改变以下单元格的垂直对齐方式

Question

看看这个小提琴：

http://jsfiddle.net/cu4u5xo5/2/

    .tbl {
        display: table;
        width:"100%";
    }
    .trow {
        display:table-row;
    }
    .ul {
        white-space: nowrap;
    }
    .col {
        display:table-cell;
    }
    .col1 {
        background:#77c;
    }
    .col2 {
        background: #faa;
    }
    .col3 {
        background: #afa;
        vertical-align: top;
    }
    .inside {
        display:inline-block;
        /* change this to block */
    }

<div class="tbl">
        <div class="trow">
            <div class="col1">
                <div class="inside">
                    <ul>
                        <li>INSIDE ONE</li>
                        <li>INSIDE ONE</li>
                    </ul>
                </div>
            </div>
            <div class="col2">COLUMN TWO</div>
        </div>
    </div>

分区有显示表、表行和表单元格。

当我将.inder设置为display:inline块时，以下单元格的行为就像垂直对齐：底部。我可以通过设置vertical-align:top来覆盖它，但我只是想知道为什么在一个单元格中放置带有内联块的div会更改另一个单元格的属性

Answer 1

根据CSS规范（我强调）：

垂直对齐属性会影响框的线框内的垂直定位由inline级别元素生成。

如果将第一个单元格的内容样式设置为block，则它不再是内联元素。因此，vertical-align属性将不起作用，第二个单元格的内容将最终位于其默认位置（与单元格顶部对齐）。

Answer 2

试用演示

.inside {
    display:inline-block;
    vertical-align:top;
}