IE7 - плавающее изображение исчезает!

Question

Хорошо. Вот ситуация. Я оформляю раздел комментариев на одном из моих сайтов. Вот пример разметки:

    <ol class="comments">
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Sunday 2nd of August 2009 12:12:54 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">One more comment :D:D:D</p>
            <div class="clear"></div>
        </li>
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Thursday 30th of July 2009 02:59:48 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">Testing comments lalala<br />
            <br />
            Testing comments lalala<br />
            <br />
            Testing comments lalala</p>
            <div class="clear"></div>

        </li>
    </ol>

А вот как я это оформляю:

.comments li {
    margin-top: 1em;
    padding: 0 1em;
    background: #3a3a3a;
}
.comments img {
    float: left;
    margin: 1em 1em 1em 0;
    border: 1px solid #4f5055;
}
.clear {
    clear: both;
}
.pad-top {
    padding-top: 1em;
}
.pad-bottom {
    padding-bottom: 1em;
}

Все отлично работает во всех браузерах, кроме IE7, где исчезнувшее изображение исчезает. Чтобы продемонстрировать, вот как это выглядит в IE8, Firefox и т. Д. (Вот как это должно выглядеть):

http://richardknop.com/pic2.gif

А вот как это выглядит в IE7:

http://richardknop.com/pic1.gif

Кто-нибудь знает, как это исправить? Вместо этого я уже пытался использовать плавающий якорь и многие другие приемы, но не могу заставить его работать правильно в IE7.

Answer 1

В IE7 есть несколько гильотинных и цветовых ошибок BG, но они обычно связаны с использованием: hover. Я не знаю, так ли это в данном случае, но типичное решение: дать элемент layout ; в частности, задайте макет для .comments li.

.comments li {
    overflow: auto;
}

Answer 2

Это сработало для меня, когда я столкнулся с подобной проблемой:

img {позиция: относительная;}

Answer 3

Также столкнулся с этой проблемой и нашел это решение: http://css -class.com / articles / explorer / guillotine /

Answer 4

Не уверен насчет лучших практик, но я бы поместил внутреннюю часть блока div, а затем переместил этот блок.

Я бы также добавил: оба раздела .commments li в CSS.