フロート要素内でポジショニングを行うと指定どおりに配置されない

症状

フロート化した要素の子孫要素をポジショニングすると指定した位置に配置されない。表示すらされないこともある。

例示

<div style="float:left; width:100px; height:100px; background:aqua;">
<div style="position:relative; left:5px; top:5px; border:2px solid green;">A</div>
</div>
A

フロート内にあるdiv要素を右下方向に5px移動させています。

スクリーンショット

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

修正状況

  • 主にMacIE4.xとMacIE5.0で不具合が発生するようです。
  • MacOSX上のMacIE5.1以降でこの不具合は発生しないそうです。
  • 古いバージョンのOS上(OSXより前?)ではMacIE5.1でもこの不具合が発生するそうです。ただし、OS9.2+MacIE5.1.4では発生しないという情報があります。

関連記事

スポンサーリンク

表題をtop以外に置くと正しい位置に表示されない

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

上に戻る