Internet Explorer (Windows) CSSバグリスト

幅や高さを指定した要素内にあるフロートの下マージンが無視される(IE6)

症状

WinIEは幅や高さを指定した要素はボックスサイズの算出時に内部のフロートを除外しなくなる(WinIEバグ053)が、このときフロートの下マージンが無視されてしまう。

例示

<div style="width:10em; border:2px solid red;">
<img src="../img/img01.png" alt="★" 
  style="float:left; margin:1em;">
文字列</div>
<div style="width:10em; border:2px solid blue;">
文字列<br>文字列<br>文字列<br>文字列<br>文字列</div>
★ 文字列
文字列
文字列
文字列
文字列
文字列

フロート化した画像に幅1emのマージンを置いています。

スクリーンショット

Moz1.0.2Moz1.0.2での表示(標準モード)

WinIE6WinIE6.0での表示(標準モード)

補足

WinIE6.0で右フロートを使用した場合は下マージンが設置されます。ただし、マージンが内容領域内に含まれるように親要素の高さが広がります。なお、WinIE5.5以前では左右のフロートでこのような状態になります。

<div style="width:10em; text-align:right; border:2px solid red;">
<img src="../img/img01.png" alt="★" style="float:right; margin:1em;">
文字列</div>
<div style="width:10em; text-align:right; border:2px solid blue;">
文字列<br>文字列<br>文字列<br>文字列<br>文字列</div>
★ 文字列
文字列
文字列
文字列
文字列
文字列

修正状況

WinIE6.0では標準・互換モードの両方で不具合の発生が確認されました。