今回の新しいデザインを作成した際に、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に書かれている、マージンの代わりにパディングで指定する。
IE7
今回この「IE Doubled Float-Margin Bug」はIE7では修正せれているみたいだ。少なくともbeta2の段階で、Waviaeiのデザインを試した限りでは問題なかった。
このバグを含め、他にIEに悩まさせれたのは２つ。１つはアイコン画像の透明部分がPNG24の為、表示がおかしくなる問題。IE7ではサポートされているけど、IE6以前ではサポートされていない事は分かっていた。PNG8でも試したけれど、アイコンの画質が落ちすぎるので諦めた。もう１つは、liにlist-style-position: insideと一括指定した上で、後でlist-style: noneと指定しても、list-style-position: insideが適用されたままになる。
この２つの解決方法は簡単。せっかくなので、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に詳細な記事がある。英語が苦手な方は、古いけどこの記事が分かりやすい。