Question

http://wilwaldon.com/ie7bug/test1.php

注意中间列，图像应该向左浮动，它们在每个浏览器中都可以，但是IE7。我以前从未遇到过这个问题，也不知道发生了什么。

非常感谢任何能指出正确方向的想法，谢谢。

更新

如果我从#contentleft p删除宽度：330px，聚光灯排列完美，但我遇到了一个新问题。左列现在包装右列。 Ughh！ IE7 !!!

Answer 1

从你的问题来看，目前尚不清楚你想要实现什么来漂浮标题左边的图像和段落或段落的左边。您能否附上显示所需结果的图像以及您认为该错误的内容。

Answer 2

我想这与你在聚光灯下给予

元素的“width：330px”有关。 IE7用它来处理它们，以便清除图像......

您可能需要使用包含不包含图像的图像和聚光灯的聚光灯的宽度。

Answer 3

将其粘贴到空的html中，看看它是如何工作的。应该解决你所有的问题。修复.box的宽度以匹配您需要的宽度。如果div.left为空并且您没有图像，它也可以工作。

<div class="box">
    <div class="left">
        <img src="http://www.google.com/intl/en_ALL/images/logo.gif" />
    </div>
    <div class="right">
        <h2>Heading</h2>
        <p>Paragraph text</p>
    </div>
</div>



<style>
    .box {
        width: 600px;
        background: red;
        }
    .left {
        float: left;
        width: auto;
        }
</style>

Answer 4

我不喜欢这样做，但这是使用jQuery实现IE7效果的一种方法：

    $(function() {

        $(".spotlight .item img").each(function() {

            $(this).css("marginBottom", $(this).parent().height() - $(this).height());

        });

    });

请参阅http://test.sua.umn.edu/test.kamran/ie7float.html

Answer 5

您似乎正在使用display: table-cell将文本显示在浮动图像旁边的列中，而不是环绕它。

You should be using overflow to achieve that effect：

.spotlight1 p { 
    color: #333333;
    font-size: 12px;
    overflow: hidden;
}

你也必须摆脱这些段落的宽度，他们现在从#contentleft p获得。

但如果将#inner2right2 div放在#inner2left div之前，则可以对最左边的两列使用相同的技巧。然后，您可以在左侧列上使用溢出，使它们保持彼此相邻。这样你就可以摆脱#contentleft p上设置的宽度。

这也适用于IE7。

我认为如果你给那些相同的块“layout”，它也可以在IE6中运行。最简单的方法是添加zoom: 1。

IE7图像浮动bug

5 个答案: