CSS IE6 IE7 Définit la largeur de l'élément enfant lorsque la position de l'élément parent est relative

Question

J'essaie de définir une largeur pour un élément enfant dont la position du parent est relative. Mais quand je donne une largeur à l'enfant plus grande que la largeur du parent, la largeur du parent dans FireFox sera changée. Et qui dans IE6/IE7, je dois changer la largeur du parent, alors l'enfant peut être changé. Maintenant, j'ai besoin de changer la largeur de l'enfant mais de ne pas changer ses parents.

#container { 
    width:300px; 
    height:300px; 
    position: relative; 
    background:#666; 
} 

#box { 
    height:100px; 
    position: absolute; 
    top: 100px; 
    left: 50px; 
    background:#006; 
    max-width:300px; 
    min-width:220px; 
} 

<div id="container" style="float:left;"> 
    <div id="box"> 
     <div> 
      <table style="border:none;padding:0 0 0 0; margin:0 0 0 0em;" border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
       <td style="width:300px; word-wrap:break-word; word-break:break-all;">    
     bmkmgklkldfbmm bmsdfkmsdfl vmsdfklvmkbsbndfbf msdvmkdvsdfkmvcnas dcbnasdjkcn asdjudhcud cadjkcnasdcbnasd jkcnasdj 
        </td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

    <div style="float:left;"> 
    udhcudcadjkcnasdcbnasdjkcnasdj 
    </div> 

Answer 1

Utilisez-vous un DOCTYPE? C'est votre meilleure première étape pour s'assurer que les navigateurs agissent de la même manière.

Answer 2

Essayez d'ajouter overflow: hidden; à #container. Une autre option est overflow: scroll;. Cette propriété décrit ce qui devrait arriver à un élément conteneur lorsque ses enfants sont plus gros que ce qu'il est. Je suppose que le comportement par défaut est différent dans Firefox et IE.

Voici quelques documentation.