Question

继昨天的问题（DOM Equidistant divs with inline-blocks and text justify won't work when inserting through 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/

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

2 个答案: