我该如何解决这个IE CSS问题？

Look here (http://www.makeofficebetter.com/comments.htm) for a link to an example of my problem.

在这里(http://www.makeofficebetter.com/comments.htm)查看我的问题示例的链接。

If you look at that link you'll see that I have a IMG floated left, and a DIV overlaying it. within that div I have 2 more divs. Both should overlay the IMG, but for some reason only the first DIV overlays correctly...and the 2nd does not. It refuses to overlay my IMG. Both are children of a DIV that is overlaying the IMG.

如果你查看那个链接,你会看到我有一个IMG漂浮在左边,一个DIV覆盖它。在那个div中我还有2个div。两者都应该覆盖IMG,但由于某种原因,只有第一个DIV正确覆盖...而第二个不覆盖。它拒绝覆盖我的IMG。两者都是覆盖IMG的DIV的孩子。

This seems to be only a problem in IE8 Compatibility Mode...so I guess that means it also looks bad in IE7. You can toggle Compatibilty mode off and on to see the problem and I've added color to my DIV backgrounds so you can see the issue better.

这似乎只是IE8兼容模式中的一个问题...所以我猜这意味着它在IE7中看起来也很糟糕。你可以关闭和打开Compatibilty模式以查看问题,我已经为我的DIV背景添加了颜色,这样你就可以更好地看到问题。

Safari and Firefox work fine.

Safari和Firefox工作正常。

2 个解决方案

#1

Use DRY concepts with your CSS, this might help weed out the problem.

在您的CSS中使用DRY概念,这可能有助于解决问题。

For example instead of having two classes .comment and .mod-comment (both with identical subclasses), only use .comment and when a moderator posts, add a second .mod class.

例如,不要使用两个类.comment和.mod-comment(两者都有相同的子类),只使用.comment,当主持人发布时,添加第二个.mod类。

Example:

current

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

DRY

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

This way, you can style comment, and stick the differences for mod comment in .mod

这样,您可以设置注释样式,并在.mod中粘贴mod注释的差异

#2

The problem is that the avatar is taking up space that the bubble wants. IE7 won't let them overlap. I tried adding this CSS - as far as I can tell that will solve it for IE7 without breaking in Firefox. I suggest more testing or making this CSS conditional for IE7 only.

问题在于化身占据了泡沫所需的空间。 IE7不会让它们重叠。我尝试添加这个CSS - 据我所知,这将解决IE7而不会破坏Firefox。我建议更多测试或使这个CSS仅适用于IE7。

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

Hope this helps!

希望这可以帮助!

#1