IE7 - décalage de positionnement absolu différent de Firefox?

Question

Je range le travail d'un autre développeur qui semble avoir fait du mauvais boulot avec le CSS.

Il ya le div principal "wrapper" sur la page, et à l'intérieur c'est un logo et des images pour la navigation. Les images utilisent "position: absolute" et utilisent la propriété CSS "top" pour les compenser. Cependant, Firefox et IE semblent commencer leur décalage à partir d'un point différent, ce qui signifie que le logo est d'environ 100px au-dessus où il devrait être dans IE.

Est-ce un bogue IE CSS ou une chose connue?

Exemple en question: http://barry.cityjoin.com/mccamb/

Answer 1

Si vous souhaitez positionner des éléments tout à fait dans un emballage en utilisant haut, à droite, en bas et/ou à gauche, la position de l'emballage doit être défini comme relatif explicitement. Sinon, les éléments absolus seront positionnés dans le port de vue à la place.

Un petit exemple de travail:

<style> 
    .wrapper 
    { 
     position: relative; 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     top: 10px; 
     left: 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     top: 80px; 
     left: 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

Une autre possibilité serait de positionner les éléments absolus en utilisant les marges:

<style> 
    .wrapper 
    { 
     height: 100px; 
     width: 800px; 
    } 
    .absoluteLogo 
    { 
     position: absolute; 
     margin: 10px 0 0 10px; 
     height: 60px; 
     width: 80px; 
    } 
    .absoluteElement 
    { 
     position: absolute; 
     margin: 80px 0 0 320px; 
     height: 20px; 
     width: 80px; 
    } 
</style> 

<div class="wrapper"> 
    <div class="absoluteLogo">Logo</div> 
    <div class="absoluteElement">Element</div> 
</div> 

Le résultat est le même et devrait fonctionner dans tous les navigateurs.