フロートの左右マージンが指定値より大きくなる

症状

フロート化させたボックスに左右マージンを指定すると、指定値の2倍程度のマージンが設置される。

例示

<div style="float:left; width:3em;
  margin-left:1em; background:aqua;">F</div>
<div style="clear:left; font-family:'MS ゴシック',monospace;">
□□□□</div>
F
□□□□

フロートには1emの左マージンを指定しています。次の行にある「□」の列を参考にしてマージンの量をみてください。

スクリーンショット

N7N7.02での表示(標準モード)

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

対策

floatとともにdisplay:inlineを指定することで回避できます。

F
□□□□

修正状況

WinIE5.5、WinIE6.0標準モード、WinIE6.0互換モードで不具合の発生が確認されました。

関連記事

スポンサーリンク

改行コードの自動変換 core.autocrlf core.safecrlf

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

上に戻る