爲什麼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以不同的方式顯示我的頁面？

回答

相關問題