WordCamp Yokohama 2010 バナー

Tag: hack

Jul 02 2006 (Sun)

IE７はDoubled Float-Margin Bugが修正されているのとIEハック

今回の新しいデザインを作成した際に、IE固有のバグ「IE Doubled Float-Margin Bugに悩まされました。

このバグは、floatするとmarginが２倍となる、IEのみの原因不明バグ。今回でのデザインでもそうだったし、おそらく一番起こりやすいケースが、divをfloat: leftで回り込ませて、同じdivにmargin-left: 20pxと同じ左方向へマージンを指定するケース。20pxがなぜか２倍の40pxに表示されてしまう。Waviaeiのフッタのように、複数のdivを全てfloat: leftさせると、一番左端のdivのマージンが２倍になる。

解決方法はpositioniseverything.netで示されているように、display: inlineを指定するか、CSSプロフェッショナル・スタイルのp.248に書かれている、マージンの代わりにパディングで指定する。

[… Read More]