IE7でフロートをクリアする際に出来る謎の隙間について。
例えば下記のようなソースで発生します。
<div style=”float:left; width:400px;”>
<p>text</p>
</div>
<div style=”float:right; width:400px;”>
<p>text</p>
</div>
<h2 style=”clear:both;padding:10px; font-size:12px; background:url() left top no-repeat;”>クリアするテキスト</h2>
この場合InternetExplorer 6とInternetExplorer 7において、h2の上部に空白が発生し詰めることが出来なくなります。
解決法としてはh2の横幅を固定すること。
固定にしてpaddingにすると背景画像が消えることがありますので下記のように変更します。
<h2 style=”clear:both; width:800px; font-size:12px; text-indent:10px; line-height:32px; background:url() left top no-repeat;”>クリアするテキスト</h2>
paddingで制御していた部分は、text-indentとline-heightで制御します。