Chrome瀏覽器和火狐瀏覽器中的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瀏覽器：

而這正是火狐顯示：

Answer 1

這要麼是寬度不匹配或因爲您沒有正確清除容器。由於沒有現場版本的問題，我無法確定它是哪個版本，但是如果清除了容器並且它不起作用，則必須爲每個div設置固定寬度，並將其設置爲浮動和內聯 - 塊，像這樣：

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