Comment puis-je résoudre ce problème CSS IE?

Question

Regardez ici (http://www.makeofficebetter.com/comments.htm) pour un lien vers un exemple de mon problème.

Si vous regardez ce lien, vous verrez que j'ai un IMG flottant à gauche, et un DIV superposant. dans ce div j'ai 2 divs de plus. Les deux doivent superposer l'IMG, mais pour une raison quelconque, seul le premier DIV se superpose correctement ... et le second ne le fait pas. Il refuse de superposer mon IMG. Les deux sont des enfants d'un DIV qui recouvre l'IMG.

Cela semble être seulement un problème dans IE8 Compatibility Mode ... donc je suppose que cela signifie aussi qu'il semble mauvais dans IE7. Vous pouvez activer et désactiver le mode Compatibilité pour voir le problème et j'ai ajouté de la couleur à mes arrière-plans DIV afin que vous puissiez mieux voir le problème.

Safari et Firefox fonctionnent bien.

Answer 1

Utilisez les concepts DRY avec votre CSS, cela pourrait aider à éliminer le problème.

Par exemple au lieu d'avoir deux classes .comment et .mod-comment (les deux sous-classes identiques), utilisez uniquement .comment et quand un message de modérateur, ajouter une deuxième classe .mod.

Exemple:

actuelle

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

SEC

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

De cette façon, vous pouvez le style commentaire, et coller les différences pour commentaires mod dans .mod

Answer 2

Le problème est que l'avatar prend de l'espace que la bulle veut. IE7 ne les laissera pas se chevaucher. J'ai essayé d'ajouter ce CSS - pour autant que je sache, cela le résoudra pour IE7 sans casser dans Firefox. Je suggère plus de tests ou de rendre ce CSS conditionnel pour IE7 seulement.

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

Espérons que cela aide!