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 中是不同的。

这里有一些documentation。

Answer 2

您使用的是 DOCTYPE 吗？这是确保浏览器行为相同的最佳第一步。