Largeur de li avec deux flotteurs différents dans IE, corrigé dans FF

Question

J'ai travaillé sur la plupart des plis avec mon effet "lampe à lave" que j'essaye de créer. Fondamentalement, je veux deux accolades (les deux sont des images) pour envelopper un élément de la liste, puis suivre l'élément de la liste suivante. Je construis toujours en FF, puis fais des exceptions pour IE. Je ne peux pas comprendre quelle exception je dois faire! J'utilise un li en position absolue qui contient deux div. Le premier div est flottant à gauche, le second flottant à droite. La largeur du li est définie à la largeur du li qu'il est censé être envelopper. Ainsi, créer l'effet des accolades sur les côtés gauche et droit du texte. Il fonctionne magnifiquement dans Firefox, mais IE a deux problèmes:

1. Les fonds des images sont coupés. Parfois, ils réapparaissent lorsque l'animation se termine, parfois ils ne le font pas. Je suppose que cela a à voir avec la hauteur, mais peu importe ce que je définis la hauteur, il échoue!
2. La largeur est complètement erronée.

Voici un exemple en direct de celui-ci: http://jsbin.com/odome/2

La position gauche dans IE est toujours 5-7px plus que dans FF, mais c'est une petite différence. Je suis plus préoccupé par la largeur et le fond des images étant coupées. Merci, comme toujours, pour l'aide!

Answer 1

1) votre ul # sélection-test n'est pas correctement "effacé"

2) il ne semble pas que vous voulez que votre li pour envelopper, il faut donc ajouter un espace blanc: nowrap

3) Opinion: Je ne sais pas ce que je ressens de l'utilisation de li # blob comme de la lave dans votre lampe. Si elle était moi je ferais quelque chose comme ça

<div id="menu"> 
    <ul id="selection-test"> 
    <li>Menu Item One</li> 
    <li>Menu Item Two</li> 
    <li>Menu Item Three</li> 
    </ul> 
    <div id="lava"> 
    <div id="lava-left"></div> 
    <div id="lava-right"></div> 
    </div> 
</div> 

Answer 2

Vous devez utiliser un CSS reset pour que les listes se comportent de plusieurs façons.