ie7 표준 모드에서 플로트 문제가 발생했습니다.

Question

오른쪽 하단의 플로트에서 div를 만들고 그 부모 아래에 표시하려고합니다. 이 마크 업은 브라우저 모드에서 IE9를 사용할 때를 제외하고 모든 브라우저에서 작동합니다 : IE9 및 문서 모드 IE7 표준 (사용해야하는 것이 있습니다)

어떤 이유로이 설정에서는 div는 FF 또는 Chrome 에서처럼 텍스트를 둘러 볼 필요가있을 때 상위 div의 왼쪽으로 확장됩니다. 그건 그렇고,이 쓰레기에 대한 IE7을 싫어. 마크 업은 완전 논리적이며 작동해야하지만 IE7은 얼간이가되어야합니다.

<div style="width: 200px;"> 
    <div style=" height: 400px; border: 1px solid #000000;"> 
    </div> 
    <div style="border: 1px solid #c0c0c0; position: relative; height:15px; bottom: 19px; left: -2px; float:right;"> 
     <div style="height: 15px; float: right;"> 
      Text in div</div> 
    </div> 
</div> 

Answer 1

당신은 position: relative/position: absolute를 사용하도록 전환 할 수 있습니다 :

http://jsfiddle.net/5fdcV/

<div style="width: 200px; position: relative"> 
    <div style=" height: 400px; border: 1px solid #000000;"> 
    </div> 
    <div style="border: 1px solid #c0c0c0; position: absolute; height:15px; bottom: 2px; right: 2px;"> 
     <div style="height: 15px;"> 
      Text in div</div> 
    </div> 
</div> 

Answer 2

IE7은 일종의 바보입니다. DIV에 명시적인 너비를 지정해야 IE7이 손실되지 않도록 할 수 있습니다.