Chrome和Firefox中的HTML流不同

我有一个简单的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>   

试试这个例子——你应该看到女孩脸上的“18+”标志。 它在Chrome和Firefox上都可以正常工作

但是，当我一个接一个地再做几个div时，Firefox似乎放松了HTML流，将页面上的“18+”图像（具有“position:absolute；”属性）留在了错误的位置

试试这个例子

这就是它在Chrome中的外观：

这就是Firefox显示的内容：

---

这可能是由于宽度不匹配，也可能是因为您没有正确清理固定容器。由于没有问题的实时版本，我无法判断是哪个问题，但如果您清除修复了容器，但它不起作用，则必须为每个div设置固定宽度，并将其设置为float和inline block，如下所示：

---

我正在尝试使用clearfix进行一些实验，谢谢你的提示。但是“float:left”是我试图避免的解决方案——它会破坏我所有的HTML。如果你对浮动div的容器应用clearfix，它根本不会破坏你的HTML！这也很容易。宽度本身也应该起作用，但是如果你需要一个流畅的布局，这是不合适的。谢谢！clearfix确实有助于浮动：左，所以它解决了问题。