IE8の互換表示ではまる

Tips Html(css)

IE8のバージョンアップ(Release Candidate1)のお知らせが来ていたので、大して考えもせずに更新をかけたのですが、そうするといままで表示されていた部分がずれるようになってしまいました。ま、いずれやらないといけないことなので、早いか遅いかの違いしかないんですけどね。

現象

こんな感じで数ピクセルずれてしまっています。この部分のCSSは IE(6、7、8b)とそれ以外で分けていて、これまでは互換表示にしなくてもちゃんと表示されていたのですが、IE8(Release Candidate1)では『*:first-child+html』にはまらなくなったようです。

*:first-child+html div.baloon span { padding: 7px 7px 14px 0px; } /* IE */
html>/**/body div.baloon span { padding: 8px 7px 14px 0px; } /* Firefox, Opera,... */

下の方を『padding: 5px 7px 14px 0px;』に書き換えればぴったりくるのですが、そうすると今度は Firefoxの表示がずれてしまいます。
IE8の標準だけに有効な CSSハックを探したんですが、いずれもうまくいかずあきらめました。

対処

<meta http-equiv="X-UA-Compatible" content="IE=emulateIE7" />

ヘッダにこれを入れれば、IE8の互換表示が強制的に ONになるので、そうすることにしました。IE8標準の方が CSS的にきれいで、わざわざ汚いのを指定するのは忸怩たる思いがあるのですが、誰か CSSハック職人の方が解決法を探してくださるまでこの方法でいこうと思います。

参考