在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就好了.我得到两行和五列所有对齐jsut罚款,这是一个截图.

但在IE中,行向下向右级联.

Answer 1

这个问题被称为IE"stepdown"bug.

据推测这是因为IE的旧版本添加了隐藏<br>元素.

根据CSS Tricks,您可以使用应用于浮动元素的以下CSS规则来解决此问题:

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

有关更详细的说明,请参见http://css-tricks.com/prevent-menu-stepdown/.