Question

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

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

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

Safari和Firefox工作正常。

Answer 1

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

例如，不要使用两个类.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
中粘贴mod注释的差异

Answer 2

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

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

希望这有帮助！

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

2 个答案: