フロートとマージンのバグ

float と margin に関して、IE6 にはやっかいなバグがあります。左フロートしているボックスに対して左マージンを指定すると、指定値の倍のマージンが空いてしまいます(ただし、左フロートの前に、さらに左フロートがある場合は、後の左フロートに左マージンを指定しても倍にはならないようです)。右フロートの場合も同様で、先に右フロートしたボックスの右マージンが指定値の倍になります。
よって、できるだけfloat:left を指定したボックスには margin-left を指定しない(0にする)、float:right を指定したボックスには margin-right を指定しない(0にする)ようにしましょう。
このバグは float を指定したボックスに display:inline を指定すると回避できるようです。 CSS2の仕様ではフロートしたボックスの display は強制的にブロックレベルな値に修正されるので display:inline を指定したことによる不具合はないと思われます。

「フロートとマージンのバグ」への2件のフィードバック

  1. Aw, this was a really quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I procrastinate alot and never seem to get something done

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

*