HOME > Tips > CSS > 6以前のIEでフロートを指定した要素のマージンが倍になる対策

6以前のIEでフロートを指定した要素のマージンが倍になる対策

  • Author:920

バージョン6以前の「Internet Explorer」では、「float」を設定したブロックにマージンを指定すると、指定値の約2倍になってしまいます。(フロートした側に指定したマージン)

構造を十分検討すれば、問題になる組み合わせを避けながら目的のデザインを実現できますが、簡単にこの問題を解決する方法があります。

「float」を指定したボックスに「display: inline;」を合わせて指定します。これだけで解決します。

CSS2の仕様では、「float」を指定した要素への「display」の指定は無視されることになっているため、バージョン6以前の「Internet Explorer」以外に適用しても問題はないように思われます。

参考: Positioning the float: the 'float' property

UP