Question

我完全无法清楚地描述我的问题所以我试图在这里尽可能简单地制作一个jsfiddle：http://jsfiddle.net/Emf2f/。在Chrome + IE上，我的图像在＃div3下，而在Firefox上，则在＃div3旁边。为什么会这样？哪个结果更“标准”？

<div id="div1">
    <div id="div2">
        <div id="div3"> Text </div>
    </div>
    <img src="http://img805.imageshack.us/img805/758/txgo.jpg" />
</div>

#div1{
    width:500px;
    overflow:auto;
    border:1px solid red;
}
#div2{
    margin-bottom:-1px;
}
#div3{
    background:cyan;
    float:left;
    width:200px;
    height:100px;
}

Answer 1

我会在您不希望图像与内嵌一起显示的对象周围使用“清除”。您可以在此处详细了解定位：http://w3schools.com/css/css_float.asp

该网站有您要完成的确切示例。

我将您的图片添加到div标签（div4）中，然后将其放置在该div的css文件中，并且它在Chrome，IE和FF中正常工作。

DIV4 {清除：两者;}

如果这有帮助，请告诉我。谢谢。

Answer 2

从内容的角度来看，他们都在做同样的事情，显示img内联（根据HTML规范），不同的是默认的溢出行为。在Chrome和IE中，它们按照文本进行包装（这实际上是我想象的正确行为），而Firefox不是。如果您希望图像始终显示在下方，请将其标记为display:block;

为什么Firefox以不同方式显示我的页面？

2 个答案: