html - 为什么显示:inline-block inside a table cell changes vertical alignment of following cells

Question

看看这个 fiddle :

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>

div 有显示表格、表格行和表格单元格。

当我将 .inside 设置为 display:inline-block 时，后续单元格的行为就好像 vertical-align:bottom。我可以通过设置 vertical-align:top 来覆盖它，但我只是想知道为什么在一个单元格中放置一个带有内联 block 的 div 会改变另一个单元格的属性？

Answer 1

根据CSS specifications (我的重点):

The vertical-align property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.

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