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的聲明，應顯示彼此相鄰的元素。