Как я могу решить эту проблему IE CSS?

Question

Смотрите здесь (http://www.makeofficebetter.com/comments.htm) для ссылки на пример моей проблемы.

Если вы посмотрите на эту ссылку, вы увидите, что у меня есть плавающее IMG слева и DIV с наложением. в этом div у меня есть еще 2 div. Оба должны накладывать IMG, но по какой-то причине правильно только первый DIV накладывается ... а второй - нет. Он отказывается наложить мой IMG. Оба являются детьми DIV, который накладывается на IMG.

Похоже, что это проблема только в режиме совместимости IE8 ... так что я думаю, это означает, что в IE7 он тоже выглядит плохо. Вы можете отключить и снова включить режим совместимости, чтобы увидеть проблему, и я добавил цвет на свои фоны DIV, чтобы вы могли лучше увидеть проблему.

Safari и Firefox работают нормально.

Answer 1

Используйте концепцию DRY с вашим CSS, это может помочь устранить проблему.

Например, вместо двух классов .comment и .mod-comment (оба с одинаковыми подклассами), используйте только .comment, а когда модератор публикует сообщение, добавьте второй .mod класс.

Пример:

ток

<div class="comment">...</div>
<div class="mod-comment">...</div>

DRY

<div class="comment">...</div>
<div class="comment mod">...</div>

Таким образом, вы можете оформить комментарий и добавить различия для комментария мода в .mod

Answer 2

Проблема в том, что аватар занимает место, которое хочет пузырь. IE7 не позволит им перекрываться. Я попытался добавить этот CSS - насколько я могу судить, это решит его для IE7, не ломаясь в Firefox. Я предлагаю провести дополнительное тестирование или сделать этот CSS-код условным только для IE7.

    .comment .avatar {
        margin-right: -22px;
    }
    .mod-comment .avatar {
        margin-left: -22px;
    }

Надеюсь, это поможет!