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

症状

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

例示

<div style="width:10em; border:2px solid red;">
<img src="/img/cssbug/winie/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/cssbug/winie/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では標準・互換モードの両方で不具合の発生が確認されました。

WinIE7でも発生します。

関連記事

スポンサーリンク

fsockopenでSSLサーバに接続する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る