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

您正在使用DOCTYPE嗎？ 這是確保瀏覽器執行相同操作的最佳第一步。

Answer 2

嘗試添加overflow: hidden; 到#container 。 另一個選擇是overflow: scroll; 。 此屬性描述了容器元素的子元素大於子元素時應發生的情況。 我猜測Firefox和IE中的默認行為是不同的。

這是一些文檔 。