IE7 버그 - 플로트 : float의 왼쪽 자식 : 오른쪽 부모

Question

오른쪽으로 떠있는 요소의 왼쪽 떠 다니는 자식이 부모의 너비에 제약되지 않고 이상한 문제가 발생했습니다 (예 : 7에만 해당). 부모의 부모의 가장 왼쪽에있는 방법과 가장 가까운 왼쪽에 떠있는 div에서 멈추는 것. 예제 코드는 다음 바이올린을 참조 할 수 있습니다. 다른 모든 브라우저에서는 괜찮아 보이지만 불행히도 ie7을 지원해야합니다.

두 개의 부동 하위 항목의 부모에 명시적인 너비를 설정하지 않고 마크 업 구조를 변경하지 않고이 문제를 해결할 수있는 방법이 있습니까? 바이올린에서

http://jsfiddle.net/s89XZ/

코드는 아래 첨부 :

<style> 
     .wrapper{ 
      position: relative; 
      width: 500px; 
      min-height: 18px; 
      margin: 0 auto; 
      padding: 14px 0; 
      background-color: red; 
     } 
     .menu_L{ 
      color: #504A43; 
      height: 18px; 
      float: left; 
      width: 100px; 
      background-color: blue; 
     } 
     .menu_R_wrapper{ 
      float: right; 
     } 
     .menu_R{ 
      position: relative; 
      float: right; 
     } 
     .menu_R .item_L, 
     .menu_R .item_R{ 
      width: 50px; 
      height: 18px; 
     } 
     .menu_R .item_L{ 
      float: left; 
      background-color: orange; 
     } 
     .menu_R .item_R{ 
      float: right; 
      background-color: green; 
     } 
    </style> 
    <div class="wrapper"> 
     <div class="menu_L"></div> 
     <div class="menu_R_wrapper"> 
      <div class="menu_R"> 
       <div class="item_L"></div> 
       <div class="item_R"></div> 
      </div> 
     </div> 
    </div> 

Answer 1

당신은 그 작은 IE에서 부동 부모의 폭을 설정했습니다 :이 폭이 추가되었습니다 http://jsfiddle.net/s89XZ/1/를 참조하십시오를 (그것이 있어야 100 픽셀 여기에서 105px가 더 효과적이라는 것을 보여줍니다) :

.menu_R { 
    width: 105px; 
}