CSS IE6 IE7 Установить ширину дочернего элемента, когда позиция родительского элемента относительно

Question

Я пытаюсь установить ширину для дочернего элемента, положение родительского которого является относительным. Но когда я даю ширину потомку больше ширины родителя, ширина родителя в FireFox будет изменена. И что в IE6 / IE7, я должен изменить ширину родителя, тогда дочерний может быть изменен. Теперь мне нужно изменить ширину дочернего элемента, но не изменять его родительский. Спасибо!

#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

Попробуйте добавить overflow: hidden; к #container. Другой вариант - overflow: scroll;. Это свойство описывает, что должно происходить с элементом контейнера, когда его дочерние элементы больше, чем он есть. Я предполагаю, что поведение по умолчанию отличается в Firefox и IE.

Вот немного документации .

Answer 2

Вы используете DOCTYPE? Это ваш лучший первый шаг к тому, чтобы браузеры действовали одинаково.