float方向のmarginが倍増するバグへの対応

IE6ではfloatしている要素にmarginを指定すると、float方向のmarginが倍近くに増加するというバグが存在します。

float方向のmarginが倍増するバグへの対応のサンプル画像

これに対応する為にはfloatを指定している要素に対して、display:inlineを適用します。

div#box{
	float:left;
	margin:20px;
	display:inline;
}

これは、ボックスのdisplay値を変更すると言う意味ではありません。

CSSの仕様上、'float'が'none'以外の値を持つ要素のdisplayの値は強制的にblockに変換される為、この記述には全く意味がありません。

IE6に対してfloat方向のmarginが倍増するバグへの対応としてのみ活用できる記述になっています。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー