IE6의 기본 글꼴 크기는 대략 12-14px입니다. 이 기본값보다 작은 높이로 div를 정의하려고 하면 IE는 이 레이어의 높이가 글꼴의 줄 높이보다 작아서는 안 된다고 고집스럽게 믿습니다. . 따라서 height: 6px;를 사용하여 div의 높이를 정의하더라도 IE에서 실제로 표시되는 것은 여전히 높이가 약 12px인 레이어입니다.
이 문제를 해결하려면 div의 글꼴 크기를 강제로 설정하거나 오버플로 속성을 정의하여 div 높이의 자동 조정을 제한할 수 있습니다. 예를 들어 <div style="height: 6px;font: 0px Arial;"></div> 또는 <div style="height: 6px;overflow:hidden;"></div>은 IE가 스마트해지는 것을 방해할 수 있습니다.
IE7/Firefox/Opera에서는 이 문제가 발생하지 않습니다.
<div style="height: 6px;overflow:hidden;">Firefox에서 표시할 때 문제가 있습니다. 예:
<div id="idAnswer" class="ans_ques">
<div class="ans_ques_top"></div>
<div class="ans_ques_content">
<!--
<div class="ans_ques_bg_orange">
<h4>
<div class="ans_ques_h_bg">
<span>질문하고 싶습니다</span>
<img src="templets/img/squid_장식.jpg" width="56" />
</div>
</h4>
<p>공식 웹사이트에 셀프 서비스 문제 제출 시스템을 개설했으며 고객 서비스 전문가가 가능한 한 빨리 문제를 처리해 드릴 것입니다! </p>
</div>
</div>
-->
<div class="ans_ques_bottom"></div>
</div>
ans_ques_top 클래스는 위쪽 배경 이미지이고, ans_ques_bottom 클래스는 아래쪽 배경 이미지입니다. 이 디자인의 결과로 ans_ques_top 클래스가 오른쪽으로 이동하게 됩니다.