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에서 기본 동작이 다른 것 같아요.

여기에 일부는 documentation입니다.