Question

确定。这是情况。我在我的一个网站上设计评论部分。这是一个示例标记：

    <ol class="comments">
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Sunday 2nd of August 2009 12:12:54 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">One more comment :D:D:D</p>
            <div class="clear"></div>
        </li>
        <li>
            <a href="/view/profile/id/2">
                <img src="/images/photo-thumb.gif" alt="johndoe" />
            </a>

            <p class="pad-top"><em>written on  Thursday 30th of July 2009 02:59:48 AM by <a href="/view/profile/id/2" class="blue">johndoe</a></em></p>
            <p class="pad-top pad-bottom">Testing comments lalala<br />
            <br />
            Testing comments lalala<br />
            <br />
            Testing comments lalala</p>
            <div class="clear"></div>

        </li>
    </ol>

以下是我的造型方式：

.comments li {
    margin-top: 1em;
    padding: 0 1em;
    background: #3a3a3a;
}
.comments img {
    float: left;
    margin: 1em 1em 1em 0;
    border: 1px solid #4f5055;
}
.clear {
    clear: both;
}
.pad-top {
    padding-top: 1em;
}
.pad-bottom {
    padding-bottom: 1em;
}

除了浮动图像消失的IE7以外，所有浏览器都能正常运行。为了演示，这里是它在IE8，Firefox等中的外观（这应该是它看起来的样子）：

http://richardknop.com/pic2.gif

以下是它在IE7中的外观：

http://richardknop.com/pic1.gif

有谁知道如何解决这个问题？我已经尝试过浮动锚点而不是其他许多技巧，但我无法让它在IE7中正常工作。

Answer 1

IE7有一些guillotine和BG颜色错误，但它们通常与使用：hover相关联。我不知道在这种情况下是否发生了这种情况，但解决方案是一个典型的解决方案：给出一个元素layout;具体来说，给.comments li布局。

.comments li {
    overflow: auto;
}

Answer 2

当我遇到类似问题时，这对我有用：

img {position：relative;}

Answer 3

不确定最佳做法，但我会将div块放入其中，然后浮动该块。

我还要明确说明：两者都是CSS的.commments li部分。

Answer 4

也遇到了这个问题并找到了这个解决方案：http://css-class.com/articles/explorer/guillotine/

IE7 - 浮动图像消失！

4 个答案: