IE6과 7, 이상한 마진 '상속'

Question

더블 마진 버그에 대해 알고 있지만 다른 점은 .. 시나리오에 아래쪽 여백이있는 요소가 있고 그 바로 아래에 부동 요소가 들어있는 요소가 있습니다. 끝 부분에서 지워짐), 컨테이너 요소에는 포함 된 부동 요소 바로 아래에 있어야하는 아래쪽 경계선이있을 수 있습니다. 그러나 IE7과 6 즉 하단 경계선은 내용물과 정확히 같은 양만큼 떨어져 있습니다.

<h1 style="margin: 0 0 50px 0;">Menu</h1> 
<div style="border-bottom: solid 1px #000;"> 
    <div style="float: left;">Hello world?</div> 
    <div style="clear: left;"></div> 
</div> 

: 위의 요소의 아래쪽 여백 ..

그것은, 여백을 두 번하고 잘못된 위치에 적용되는 것을 더 .. 여기에 몇 가지 REPO 코드 정말 상속의 것

불만 사항 페이지 (나는 과도기를 사용했다.)에서는 텍스트 아래에 테두리가 나타나지 않지만 테두리가 텍스트에서 50px 떨어진 곳에 있음을 알 수있다. ..

이걸 IE8이라고 테스트하면 테두리가 텍스트 바로 아래에 올바르게 놓여 있습니다.

이

내가 이전에 발견하고 무시하고 주위에 작업을 관리했습니다 뭔가,하지만 난이 버그가 이름이 궁금 해요, 그리고 주위에 얻을 수있는 좋은 방법 ..

을합니다 (있는 경우 일반적으로이 문제를 해결할 수있는 방법은 대신 H1을 패딩으로 채우는 것입니다. 그러나 이것은 항상 합리적이지는 않습니다.)

Answer 1

IE가 제대로 표시 되려면 바깥 쪽 div에 hasLayout을 호출해야합니다. div 또는 zoom에 너비 또는 높이를 추가하여이를 수행 할 수 있습니다. 1.

IE에서 float도 지워서 <div style="clear: left;"></div>을 삭제할 수 있습니다. 다른 브라우저에서 float을 지우려면 overflow : hidden을 사용하십시오.

<h1 style="margin: 0 0 50px 0;">Menu</h1> 
<div style="border-bottom: solid 1px #000;overflow:hidden;zoom:1;"> 
    <div style="float: left;">Hello world?</div> 
</div>