IE中的CSS水平图像列表

Question

我已将自己编入CSS角落。我有一个图像列表，我使用无序列表彼此相邻显示。无序列表放置在固定宽度div内，因此每3个图像，接下来的3个图像将显示在下一个“行”上。

ul中的每个li不只显示图像，它显示各种东西，如：

<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>

除了IE7之外，这在大多数浏览器中都能正常工作。 IE7将图像显示在彼此之下而不是彼此相邻。我从经典的水平菜单栏技术中知道，这可以通过将li设置为左侧来固定。这对我的情况不起作用，因为我不知道每个li的高度，这取决于内容。每个li都有不同的高度，会出现一些非常奇怪的布局情况，例如位于空行右侧的图像。这是我的CSS的剥离版本：

.imagelist { border-collapse:collapse; font-size:9px; width:850px; }
.imagelist li { display:inline-block; list-style-type: none; max-width:240px; vertical-align:top; }

.imagelist li a { display:inline-block; position:relative; }
.imagelist li a img, { padding:0; margin:0; position:relative;  }

基本上，我只是想让IE7听我说并尊重内联块语句，它应该显示彼此相邻的元素。

Answer 1

通过一些更智能的谷歌搜索，我设法找到了这个条目：

http://flipc.blogspot.com/2009/02/damn-ie7-and-inline-block.html

缩放：1;和*显示：内联;解决这个问题。上帝我非常讨厌IE。