5

继昨天的问题（通过 JS 插入时，带有 inline-blocks 和 text justify 的 DOM Equidistant div 将不起作用）@Snuffleupagus 很友好地帮助我理解，我偶然发现了另一个奇怪的浏览器行为。

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

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

我尝试用一​​些虚拟内容 div 开始它们，然后只是更改该儿童的文本，但它的反应方式相同。

有任何想法吗？

4

2 回答 2

10

添加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/

于 2012-10-11T07:38:01.923 回答
3

我同意@Keukraine，您需要添加一个

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/

于 2012-10-11T07:50:04.767 回答