IE6 でのデフォルトのフォント サイズは、およそ 12 ～ 14 ピクセルです。このデフォルト値よりも小さい高さの div を定義しようとすると、IE はこのレイヤーの高さがフォントの行の高さより小さくならないと頑固に信じ込んでしまいます。 。そのため、height: 6px; を使用して div の高さを定義したとしても、IE で実際に表示されるのは高さ約 12 ピクセルのレイヤーです。
この問題を解決するには、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_decoration.jpg" width="56" />
</div>
</h4>
<p>公式 Web サイトにセルフサービスの問題送信システムを開設しました。カスタマー サービスのスペシャリストができるだけ早く対応します。 </p>
</div>
</div>
-->
<div class="ans_ques_bottom"></div>
</div>
クラス ans_ques_top は上部の背景画像であり、クラス ans_ques_bottom は下部の背景画像です。 この設計の結果、クラス ans_ques_top は右にシフトします。