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

Question

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

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

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

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

Answer 1

Использование сухих концепций с помощью 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; 
    } 

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