Chrome 和 Firefox 中的 HTML 流程不同

Question

I have a simple div example with two images one of which has absolute positioning inside the div.

That is my HTML code:

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

Try the example http://jsfiddle.net/yQn7W/1/ - you should see the "18+" logo on the face of the girl. It work's fine on both Chrome and Firefox.

But when I make few more divs one after another it seems that Firefox looses HTML flow and leaves "18+" image (which has "position: absolute;" attribute) on the page in the wrong place.

Try the example http://jsfiddle.net/yQn7W/2/

That's how it looks in the Chrome:

And that is what Firefox displays:

Answer 1

This is either to width mismatch or because you haven't properly clearfixed the container. Since there is no live version of the problem I can't tell which is it, but if you clearfix the container and it doesn't work, you will have to set fixed width for each div, and also set it to float and inline-block, like so:

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