Ie7 float bug droit?

Question

J'ai un div flottant à droite. A l'intérieur de ce div sont deux autres divs. Le premier div a une couleur d'arrière-plan et quand je me rafraîchis, il "saigne" dans la deuxième div. (Parfois devant lui parfois derrière.) Quand je défile, il se fixe. Quand je me rafraîchis, ça recommence. Cela ne se passe que dans IE7. Punaise? code ci-dessous

#sidebar {float:right;width:310px;} 
#articleSidebar {background:#DEE7E7;margin:0 5px 20px 5px;position:relative;} 
#articleSidebarHeader {margin-top:10px;padding:5px;} 
#articleSidebar h2, #articleSidebarHeader h2 {color:#5A5A5A;font-size:14px;font-weight:bold;} 
#articleSidebar ul {color:#5A5A5A;font-size:11px;padding:0 7px;} 
#articleSidebar ul li {background: transparent url(../images/bulletSquare9C.png) no-repeat scroll left 6px; padding:0 0 10px 7px;} 
#articleSidebar ul li a {color:#5A6B73;display:block;text-decoration:underline;} 
#articleSidebar ul li a strong {font-weight:bold;} 
#sidebarAd {margin:0 5px 20px 5px;position:relative;} 





<div id="sidebar"> 
     <div id="articleSidebar"> 
      <div id="articleSidebarHeader"> 
       <h2>Title here TBD</h2> 
      </div> 
      <ul> 
       <li><a href="replaceMe">link</a>text</li> 
       <li><a href="replaceMe">link</a>text</li> 
       <li><a href="replaceMe">link</a>text</li> 
       <li><a href="replaceMe">link</a>text</li> 
      </ul> 
     </div> 
     <div id="sidebarAd"> 
     <!--300x250 ad here--> 
     <iframe src="http://www.google.com" height="250" width="300" scrolling="no" frameborder="0"></iframe> 
     </div> 
    </div> 

Answer 1

Je pense que votre positionnement relatif fait partie du problème. Les deux DIV ont le même positionnement relatif. Je pense que dans IE7 la position et la hauteur/largeur de la position originale des éléments avant d'appliquer le positionnement "relatif" n'est pas calculée correctement.

Les correctifs qui viennent à l'esprit sont:

1. Utiliser le positionnement absolu. Cela retire les éléments du DOM avant de le repositionner, tout en ne conservant pas l'espace qu'ils auraient occupé dans la page. Dans ce cas, les valeurs de positionnement ne peuvent pas être identiques ou superposées.

2. Méthode préférée Utilisez les divs "floated" pour obtenir le même effet que vous le faites. Plutôt que le positionnement relatif, vous pouvez spécifier des définitions CSS de marge pour obtenir la même présentation visuelle.

   #articleSidebar {background:#DEE7E7;float:left;margin:0 5px 20px 5px;}  
   #sidebarAd{margin:0 5px 20px 5px;float:left;} 
   

Answer 2

Dans IE6 et 7 Je joue généralement autour de position:static et zoom:1 qui peut résoudre le problème.