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