Problèmes fréquents de remplissage/marge: comment puis-je le résoudre?

Question

J'apprends c'est un problème classique sur IE7:

<div class="loc_main">  
    <div class="loc_cerca"> 
     <div class="event_cerca_item"> 
      Field 
     </div> 

     <div class="event_cerca_item"> 
      <input type="text" class="loc_cerca_input_hidden" /> 
     </div>  
    </div>  
</div> 

.loc_main 
{ 
    margin-left:30px;  
} 

.loc_cerca 
{ 
    padding-top:50px; 
} 

.loc_cerca_input_hidden 
{ 
    border:1px solid #6D6E70; 
    width:500px; 
} 

.event_cerca_item 
{ 
    width:500px; 
    float:left; 
} 

Si vous cochez sur IE7 (ici il y a un exemple fiddler), vous verrez que le Input Box hérite de la margin-left et le padding-top du conteneur div.

En fait, si j'échange margin-left:30px; avec padding-left:30px; (sur .loc_main) et padding-top:50px; avec margin-top:50px; (sur .loc_cerca) cela disparaîtra.

C'est un bug IE7 commun, mais j'aimerais savoir comment je devrais résoudre ce problème. Une idée? Ou je dois juste me rappeler de mettre margin on top/bottom et padding on left/right?

Answer 1

De nombreux bogues/incohérences IE7 sont basés sur le fait que certains éléments possèdent ou non une «propriété» propriétaire nommée hasLayout. Une manière courante de le fournir est zoom: 1, car il n'a pas d'effets secondaires (pertinents) autres que le réglage hasLayout à true. Vous pouvez fixer votre exemple spécifique en ajoutant zoom: 1 à .loc_cerca.

Voir:http://jsfiddle.net/gC4gP/17/