javascript - 添加内容时 div 位置移动

Question

在昨天的问题 ( DOM Equidistant divs with inline-blocks and text justify won't work when inserting through JS ) 之后，@Snuffleupagus 非常友好地帮助我理解，我偶然发现了另一个奇怪的浏览器行为。

此处更新了 fiddle :http://jsfiddle.net/xmajox/NUJnZ/

当向 div 添加任何类型的内容( block 或内联)时，它们会向下移动。当所有 div 都有内容时，它们会神奇地移回正确的位置。

我试着用一些虚拟的内容 div 来启动它们，然后只是改变那个 child 的文本，但它的 react 是一样的。

有什么想法吗？

Answer 1

添加vertical-align: top到这些 div:

.rowSample > div {
    background: none repeat scroll 0 0 black;
    border: 1px solid yellow;
    color: white;
    display: inline-block;
    height: 50px;
    vertical-align: top;
    width: 50px;
}

因为这些是 display:inline-block 的元素它们作为内联元素对齐，但具有明确的尺寸。例如，<img>默认情况下标签有 inline-block显示模式，因此要在文本中对齐它们，您必须指定所需的 vertical-align属性(property)。

请查看示例 fiddle :http://jsfiddle.net/a6Hu2/