与许多内联块li标签不对齐

Question

我有一个奇怪的，间歇性的，不可复制的CSS布局问题。我有一堆里面有div的li标签。 并非总是如此，但每隔一段时间 ，当我在Chrome或Safari中加载页面时，布局未对齐：

编辑：如果您想尝试重现，该网站现在位于：www.socwall.com。 IE和Firefox似乎没有问题，只有Safari和Chrome

如果我摆动鼠标或移动滚动条，它会突然自行修复：

我知道inline-block在首先使用时有点粗略 - 你认为是吗？

Answer 1

可能在图像完成加载之前确定页面布局。包含图像标签中的高度和宽度是否可以解决问题？

Answer 2

我已经多次测试，没有任何问题。它必须是您的浏览器缓存的一些旧CSS。

尝试重置整个浏览器或删除缓存并再次尝试测试。

Answer 3

我的Safari和Chrome上的工作正常（Mac）。

Answer 4

正如我的评论中所述，只需将此规则添加到您的css样式表中：

.wallpaperList img {
     width:290px;
     height: 260px;
}

从图像中删除所有内联样式=“...”

希望这有帮助

Answer 5

作为避免内联块的替代解决方案，您可以改为浮动：左。如果您担心居中，可以：

1. 预先定义每行最大数量的项目，并将每行作为包含div，并在此处使用中心浮动技巧：http://www.cssplay.co.uk/menus/centered.html
2. 对于您的全宽页面，请根据窗口宽度使用jQuery加载内容。在窗口调整大小时，您将重新运行加载内容。从这里你可以根据每个项目的外部宽度和窗口大小计算出每行中可以有多少项目。

我知道它与inline-block相比似乎很多，但这是完美的途径：）