Un enfant positionné de manière relative dans un parent positionné de manière relative disparaît dans IE7

Question

Voici mon code :

<ul style="list-style: none; position: relative;">
    <li style="float: left;"><span style="position: relative; left: 5px; ">one</span></li>
    <li style="float: left;"><span>two</span></li>
    <li style="float: left;"><span>three</span></li>
</ul>

Tous li contiennent un span mais la première est la seule différente, ce qui est relativement bien positionné.

Tous les navigateurs fonctionnent bien, mais seulement IE6. \7 ce qui fait disparaître le premier span - et c'est là mon problème.

Answer 1

Si vous devez exiger la position relative, changez float en inline-block. La marge est également un facteur à prendre en compte.

http://jsfiddle.net/zRYqh/5/