添加内容时,Div位置会发生变化

Question

在昨天的问题之后(带有内联块和文本对齐的DOM Equidistant div将在通过JS插入时不起作用)@Snuffleupagus非常友好地帮助我理解,我偶然发现了另一个奇怪的浏览器行为.

这里更新了小提琴:http://jsfiddle.net/xmajox/NUJnZ/

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

我尝试用一​​些虚拟内容div启动它们,然后只更改那些孩子的文本,但它的反应方式相同.

有任何想法吗？

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属性.

请看一下示例小提琴:http://jsfiddle.net/a6Hu2/