javascript - Chrome 与 IE 中的定位元素

Question

我有一些元素，我试图用数学方法将它们放在两行中。

我有一个 thumb_container，它是一个 div 并且是绝对定位的。然后在使用 jquery 的内部，我用这个 for 循环加载和附加图像缩略图:

for(var i = 0; i < 7; i++) {
    var img = new Image();
    $(img).addClass("thumb");
    $(img).offset({ top:Math.floor(i / 5) * 95, left: (i % 5) * 55 })
    img.src = "images/girl_thumb_" + i + ".jpg";
}

这是相关的CSS

img, div {
    position:absolute;
}
#thumb_container {
    left:15px;
    top:370px;
}

这在 Chrome 中工作得很好。我得到了两行和五列，所有对齐都很好，这是屏幕截图。

但在 IE 中，行只是向下层叠到右侧。

Answer 1

此问题称为 IE“降级”错误。

这应该是因为旧版本的 IE 添加了一个隐藏的 <br>。元素。

根据 CSS 技巧，您可以通过将以下 CSS 规则应用于 float 元素来解决此问题:

ul#menu li {
    display: inline; /* Prevents "stepdown" */
}

参见 http://css-tricks.com/prevent-menu-stepdown/以获得更详细的解释。