添加内容时，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/

Answer 2

我同意@Keaukraine，你需要添加一个

vertical-align:top;

但是，您还需要一些特定的代码才能使其在Internet Explorer 7上运行（2012年仍然是主要的浏览器）。

/* For IE 7 */
zoom: 1;
*display: inline;

有关详细信息，请参阅此文章： http ： //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/