IE8 - 여백 - 상단 컨테이너 : 더 여유

Question

EDIT이 없습니다 10px :이 내용은 IE8에서 일어나는, 그것은 여기, IE7, 파이어 폭스 등 모든

첫 번째 오페라에서 잘 작동 내가 포토샵에서 만든 사진입니다 내 문제를 설명하기 : http://richardknop.com/pict.jpg

이제 내 문제에 대해 알고 있어야합니다.

<div class="left"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="right"> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
    <div class="box"> 
     // box content 
    </div> 
</div> 
<div class="clear"></div> 
<div class="box"> 
    // 
    // NOW THIS BOX HAS NO TOP MARGIN 
    // 
</div> 
<div class="box"> 
    // box content 
</div> 

그리고 CSS 스타일은 다음과 같이 이동 : 여기에 내가 사용하고 마크 업의 단순화 된 버전은 (내가 가장 관련이없는 내용을 왼쪽)입니다 내가 왼쪽으로 모든 irreevant 스타일과 같은 한

분명히

.clear { 
    clear: both; 
} 
.left { 
    float: left; 
} 
.right { 
    float: right; 
} 
.box { 
    overflow: auto; 
    margin-top: 10px; 
} 

테두리, 배경색 및 이미지, 글꼴 크기 등을 지정합니다.

어디에서 문제가 발생할 수 있으십니까?

Answer 1

padding-top: 10px이 작동하는지 확인하십시오. 여백이 페이지 상단에서 벗어나려고하는 것일 수 있습니다.

Answer 2

지우기 div를 닫습니다.

<div class="clear"></div> 

Answer 3

나는이 접근법을 얻지 못했다. <div>을 오른쪽 클래스로 래핑하고 또 다른 <div>에 넣고 overflow: hidden, width: 100%을 적용하여 플로트 된 요소 아래의 요소가 올바르게 표시되도록 할 수 있습니다.

Answer 4

enter code here 오버 플로우가있는 컨테이너를 사용하여 플로팅 된 div 주위를 감추고 지워진 div를 제거하십시오.

<div id="container"> 
     <div class="left">  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
     <div class="right">  
      <div class="box">  // box content right </div>  
      <div class="box">  // box content </div>  
      <div class="box">  // box content </div> 
     </div> 
    </div> 
    <div class="box"> // // NOW THIS BOX HAS NO TOP MARGIN //</div> 
<div class="box"> // box content</div> 

그리고 CSS

#container { width: 100%; overflow: hidden; } 

(I가 확인할 수없는, 그래서 미안 해요, 내가 테스트를 위해 내 작업 기계에 IE7을 왼쪽)

Answer 5

나는 이것이 IE8 버그라고 생각합니다. 떠 다니는 왼쪽 및 오른쪽 div의 형제 요소와 관련됩니다. 삭제 div가 있거나 없으면, 최종 unfloated 요소는 IE8에서 위쪽 여백을 잃습니다.

우리는이 테스트를했습니다, 그리고 유일한 IE8 잘못을 가져옵니다

http://www.inventpartners.com/content/ie8_margin_top_bug

우리는 또한 3 개 솔루션을 함께했다.

Answer 6

나는 IE8을 가지고 있지 않지만 ... 하단 div에 모두 추가하고 상단 여백 중 하나에 하단 여백을 추가 하시겠습니까? 나는 여분 div없이 동일한 효력을 달성 할 아주 확실하다.

Answer 7

비슷한 문제가 있으며 Matt Bradley가 제공하는 솔루션이 저에게 효과적이지 않습니다 (하지만 어쨌든 게시 해 주셔서 감사합니다). 나는 margin-top : hp 요소에 10px를 갖고 싶었다.

내가 만든 해결책은 h1 요소에 position : relative, top : 10px 및 margin-top : 0px를 추가하는 것입니다.