div 안의 IE7 줄 바꿈이 아래쪽 여백을 엉망으로 만듭니다.

Question

IE7에서 Firefox에서 발생하지 않는 이상한 동작을 발견했습니다. "testing 2" "div"에서이 div의 하단에 2 줄 바꿈을 추가하면 이 div에 설정된 여백을 고려하지 않고 "test 3"div가 여백없이 바로 아래에 있습니다 . "br"을 제거하면 "test 2"와 "test 3"div가 그들 사이에 여백을 갖습니다.

이 IE7 버그입니까? 아니면 이에 대한 해결 방법이 있습니까? 아마

<div style="border: dotted 1px red;"> 

    <div id="main" style="border: solid 1px black; padding: 10px; margin: 5px; float:left "> 
    testing 1 


     <div style="border: solid 1px black; padding: 10px; margin: 10px;"> 
      testing 2 
      <br><br>  <!-- THIS LINE --> 
     </div> 


     <div style="border: solid 1px black; padding: 10px; margin: 10px; "> 

     testing 3 
     </div> 


    </div> 

    <div style="border: solid 1px black; padding: 10px; margin: 20px; float: left"> 

     testing 4 
    </div> 

    <div style="clear:both"></div> 

    </div> 

<\html><\body> 

Answer 1

아니라 좋은 솔루션

하지만
태그 도움말 후 비 분리 공백을 추가 : 변경

<br><br>  <!-- THIS LINE --> 

로 :

<br><br>&nbsp;  <!-- THIS LINE --> 

. .. 어째서 웬일인지 그것이 오지 않을 것이다. .. . 비 분리 공간은 "& nbsp;"입니다. (따옴표없이 사이에 공백없이)

Answer 2

나는 IE가 이것을하고있는 이유에 대해 잘 모르겠지만, 합리적으로 청초한 해결책은 "testing 2"div의 내용을 다른 div와 랩핑하는 것입니다. : 당신이 그것을 도울 수 있다면 나는에 조언을 줄 그러나

<div style="border: solid 1px black; padding: 10px; margin: 10px;"> 
    <div> 
     testing 2 
     <br/> 
     <br/> 
     <!-- THIS LINE --> 
    </div> 
</div> 

하지 < BR/>를 사용; 가능한 경우 CSS를 사용하여 모든 것을 정렬하십시오! :)

Answer 3

대신 <br>를 사용하여 DIV에 padding-bottompadding 규칙 후 사용합니다.

Answer 4

의미 상으로는 해당 텍스트를 <p>, <blockquote> 또는 기타 블록 수준 요소 내에 배치해야합니다. <div> 안에 텍스트를 직접 배치하지 마십시오. 페이지 내의 부분 또는 섹션을 나타내는 데 사용됩니다. 예를 들어

:이 IE7에서 문제를 해결뿐만 아니라 다른 브라우저에서 더 일관 렌더링

<div style="border: 1px solid black; padding: 10px; margin: 10px;"> 
    <p style="margin: 0 0 10px 0;">testing 2</p> 
</div> 

.

Answer 5

IE7은 실제로 nested elements and their margins에 문제가 있습니다.

'testing 2'div을 have layout으로 설정하여이를 수정할 수 있습니다.

이 경우 'testing 2'div에 height:100%;을 설정하면 여백이 다시 적용됩니다. 수정본을 보여주기 위해 working example을 만들었습니다.

IE CSS 버그 중 상당 부분이 요소에서 레이아웃을 강제 적용하거나 제거하여 해결할 수 있다는 점은 주목할 가치가 있습니다.