CSS使用 → Firefoxでは正常, IEでは異常

うちのBlog, 先日からFirefoxでは正常に表示されるものの,
Internet Explorerでは適切に表示されていないことがわかった.

"IEでは正常に表示されるが, Firefoxでは崩れる"というパターンは多いが,
"Firefoxでは正常に表示されるが, IEでは崩れる"というパターンは
あまり聞かない.

特にCSSなど変更していないので, MovableTypeを2.661から3.2に
バージョンアップさせたのが原因かもしれない.

ということで, 原因を探ってみた.
うちのページはInternet ArchiverのWayback Machineに登録してあるので,
そこから, 正常に表示されていた時期のページを取得.
現在のページと比較してみる.

HTMLについて
ソースをノートパッドで見ると, 以前はEUCのため日本語部分は文字化けしており
読めないが, タグ内は問題はない.

CSSについて
HTMLと同様に, 以前はEUCであったため, フォント名を指定している部分が
文字化けしているが, 他の部分は問題はない.

IEでは, フォント名の部分が文字化けすると, 正常に表示されないのか? と考え
IEとFirefoxで使用するCSSを使い分けようかと思った.

しかし, ふと思った. HTML, CSSでの文字コードの設定はどうなっている?

以前は, HTMLでは, EUC-JPと指定して, EUC-JPによるエンコード.
CSSでも同様.

一方, 最近のものでは, HTMLはUTF-8と指定して, UTF-8でエンコードして
いるものの, CSSでは, EUC-JPとして設定しているにもかかわらず,
UTF-8でエンコードしていた.

そこで, CSSの文字コード指定を"utf-8"にしたところ, IEでも正常に表示される
ようになった.

解決. 解決.