Я закодировал себя в угол CSS. У меня есть список изображений, которые я показываю рядом друг с другом, используя неупорядоченный список. Неупорядоченный список помещается в div с фиксированной шириной, так что каждые 3 изображения следующие 3 изображения будут отображаться в следующей «строке».
Каждый li в ul не просто отображает изображение, он отображает всевозможные вещи, например:
<div id="colmain">
<ul class="imagelist">
<li>
<h2>Image title</h2>
<a href=""><img src="" /></a>
<p>Description</p>
</li>
</ul>
</div>
Это прекрасно работает в большинстве браузеров, кроме IE7. IE7 отображает изображения друг под другом, а не рядом друг с другом. Я знаю из классического горизонтального метода строки меню, что это можно исправить, установив float влево для 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 слушал меня и уважал оператор inline-block, который ДОЛЖЕН отображать элементы рядом друг с другом.