1
我已将自己编码为CSS角落。我有一张图像列表，使用无序列表相互显示。无序列表放置在一个固定宽度的div内，这样每个3个图像，下3个图像将显示在下一个“行”上。IE中的CSS水平图片列表
在UL每个L1不只是显示的图像，它会显示各种东西，像这样：
<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设置为左边的float来解决。这不适合我的情况，因为我不知道每个李的高度，这取决于内容。为每个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听我并尊重inline-block的声明，应显示彼此相邻的元素。