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

我完全没有足够清楚地描述我的问题，所以我试图让jsfiddle尽可能简单：http://jsfiddle.net/Emf2f/。在Chrome + IE上，我的图片位于＃div3下，而在Firefox上，位于＃div3旁边。为什么会发生？哪个结果更“标准”？为什么Firefox以不同的方式显示我的页面？

<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; 
}

来源

2013-06-28 Erik

你想如何显示它？ –

我不会期望Firefox中存在的行为。知道哪一个更“标准”有什么好处？所有重要的是你想要的行为，那它是什么？ – cimmanon

非常感谢。我可以达到我需要的行为。只是想知道为什么Firefox的行为如此，也许有一些聪明的原因。 – Erik

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

来源

2013-06-28 14:19:39 Mgetz

谢谢，你的解释真的很有帮助。 – Erik

我会在对象周围使用“清除”，而不希望图片与内容一起显示。您可以在这里阅读更多关于定位的信息：http://w3schools.com/css/css_float.asp

该网站有您正在尝试完成的确切示例。

我将你的图片添加到div标签（div4），然后放置清除：在该div的css文件中，它可以在Chrome，IE和FF中正常工作。

div4 {清除：两个;}

让我知道这是否有帮助。谢谢。

来源

2013-06-28 14:29:57

感谢您的帮助，您的解决方案工作得非常好，虽然Mgetz的解决方案（显示：块）不能解决我的问题，但他的解释是我需要的 – Erik

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

回答

相关问题