IE7 CSS ошибка выравнивания <img>с текстом в <ul>

Question

Последние несколько дней я опережал эту ошибку IE7, и пришло время прибегнуть к уму толпы.

У меня есть следующие HTML и CSS: http://beerpla.net/for_www/ie7_test/test.html

Цель состоит в том, чтобы иметь <ul>, где каждый <li> содержит маленький значок и текст. Многострочный текст будет выровнен сам по себе, а не обтянут под изображение.

Я пытался использовать float:left на изображении и кучу других вещей, и, наконец, я подумал, что position:absolute будет работать наверняка, но в IE7 я постоянно вижу, как текст всплывает на следующую строку и выровняется с изображением:

Я ожидаю, что это будет выглядеть так:

Я даже пытался сделать div display:inline, который работал, но затем начал оборачивать изображение длинными строками, так что это было бесполезно. zoom:1 также произвел аналогичный эффект.

Сейчас я в растерянности. Этот код прекрасно работает во всех других браузерах. IE7 - особенный, очень особенный ребенок.

Есть идеи?

Спасибо.

Редактировать: Если у вас IE8, вы можете эмулировать IE7, нажав F12, а затем Alt-7.

Answer 1

вместо того, чтобы помещать изображение как элемент, попробуйте использовать свойство background. вот так

ul li { background url(path to image) 0 0 no-repeat; padding: 0 0 0 20px; }

примечание: возможно, вам придется настроить отступ в соответствии с расстоянием, которое вы хотите сохранить между изображением и текстом.

Answer 2

Вернитесь к плавающему изображению влево, а затем добавьте overflow: hidden; к div. Текст больше не будет переноситься под изображение, и никаких побочных эффектов не будет, если вы не пытаетесь расположить контент внутри div-а (здесь этого не видно). Полностью совместимый кросс-браузер. В IE6 вам просто нужно добавить hasLayout любым способом, чтобы получить тот же эффект.

Answer 3

Перемещение тега <img> в <div> устраняет проблему. Мне до сих пор неизвестно, почему IE7 делает то, что делает.

Answer 4

Попробуйте использовать padding для li вместо поля в div. Если display: inline сработало, то, вероятно, IE задыхается от разработки блочной модели div каким-то таинственным образом: заполнение для li и, возможно, display: inline для div может сгладить это.