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

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

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

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

IE7

今回この「IE Doubled Float-Margin Bug」はIE7では修正せれているみたいだ。少なくともbeta2の段階で、Waviaeiのデザインを試した限りでは問題なかった。

このバグを含め、他にIEに悩まさせれたのは2つ。1つはアイコン画像の透明部分がPNG24の為、表示がおかしくなる問題。IE7ではサポートされているけど、IE6以前ではサポートされていない事は分かっていた。PNG8でも試したけれど、アイコンの画質が落ちすぎるので諦めた。もう1つは、lilist-style-position: insideと一括指定した上で、後でlist-style: noneと指定しても、list-style-position: insideが適用されたままになる。

この2つの解決方法は簡単。せっかくなので、IE7ハックを調べてみる。参考にしたのはLucky bag::blog: IE7 を含むモダンブラウザ向けの CSS ハックまとめと、Stylesheet Stylebook:IE用CSSの指定方法。

IE用のCSSファイルを用意して、問題のある箇所をバージョン6以下のIEにのみに適用するハックを使って、修正の為のCSSを記述。* html bodyを使用。

IEのみにこのCSSファイルを読み込ませるには、「Conditional Comments」を利用する。これはハックではなく、マイクロソフトがIEに組み込んだ機能。

[css]
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="ie.css" mce_href="ie.css" /><![endif]–>
[/css]

このようにヘッダに記述すると、IEでのみie.cssが読み込まれるようになる。このときに、後で指定されたCSSは先のそれを上書きする仕様を忘れないように注意。つまり、読み込ませるCSSファイルのリストの一番最後にこれを記述する。WordPressだったら、style.cssへのリンクの後になる。この「Conditional Comments」については、MSDNに詳細な記事がある。英語が苦手な方は、古いけどこの記事が分かりやすい。