Chrome 和 Firefox 中的 HTML 流程不同

Question

我有一個簡單的 div 示例，其中包含兩個圖像，其中一個在 div 內具有絕對定位。

那是我的 HTML 代碼：

<div style="position: relative;  display: inline; "  >             
<img src="http://www.iphones.ru/wp-content/uploads/2008/09/iphone-girl-10.jpg" / >             
<img style="position: absolute;  top: -400px; left: 100px; z-index: 10" width="32"   height="32"  src="http://4geo.ru/images/other/icon-18plus.png"/>         
</div>   

試試這個例子http://jsfiddle.net/yQn7W/1/ - 你應該看到女孩臉上的“18+”標志。 它在 Chrome 和 Firefox 上都可以正常工作。

但是，當我一個接一個地制作幾個 div 時，Firefox 似乎失去了 HTML 流，並在頁面上的錯誤位置留下了“18+”圖像（具有“position: absolute;”屬性）。

試試這個例子http://jsfiddle.net/yQn7W/2/

這就是它在 Chrome 中的外觀：

這就是 Firefox 顯示的內容：

Answer 1

這要么是寬度不匹配，要么是因為您沒有正確清除容器。 由於沒有實時版本的問題，我不知道是哪個問題，但是如果您清除容器並且它不起作用，您將必須為每個 div 設置固定寬度，並將其設置為浮動和內聯-block，像這樣：

<div style="position: relative; float:left; display: inline-block; width:500px;" >