Internet Explorer (Windows) CSSバグリスト

clearを指定したボックスの内側上部に隙間が空く(5.x/6.0)

症状

clearプロパティによりフロートの後方へ置かれることを強制したボックスに上ボーダーを設置すると、そのボックスの上部に隙間が空くことがある。

• clearプロパティを指定した要素の直前にフロートが存在しない場合、隙間は空かない。
• clearプロパティを指定した要素の直前にフロートが存在する場合、上パディングに相当する位置に幅が1pxの隙間が空く。
• clearプロパティを指定した要素の前方にフロートが1つだけ存在する場合、WinIE6.0互換モードとWinIE5.xでは、上パディング相当の隙間に加えて上マージンに相当する位置に、幅が約16pxの隙間が空く。

例示

<div style="float:left; width:90%; background:silver;
  margin:0;">↓</div>
<div style="clear:left; background:aqua; border:1px solid silver;
  margin:0; padding:0;">
<div style="background:silver; margin:0;">↑</div>
</div>

「↓」と「↑」の間に隙間はできない（ボーダーや背景色の銀色で塗りつぶされている）はずです。

スクリーンショット

補足

clearプロパティを指定する要素に、widthまたはheightプロパティを具体的な値で指定することでこの不具合を回避できます。ただし、親要素にパディングやボーダーが設定されているときにこの方法を採ると隙間が広がってしまうこともあります。以下の例では、親にボーダーとパディングを設定したdiv要素があります。

<div style="float:left; width:90%; background:silver;">↓</div>
<div style="clear:left; width:90%; background:aqua; border:1px solid silver;">
<div style="background:silver;">↑</div>

修正状況

WinIE6.0の標準モードと互換モードで不具合の発生を確認しました。