IE8へのバージョンアップで、Google AdSenseやWordPressのスタイルシート反映が不安定になった場合の対応


この記事は2012年7月に掲載されたものです。
状況が変わったり、リンク先が変わっている可能性があります。

遅まきながら、Internet Explorerを7から8にバージョンアップした。私の動作環境はWindows XP SP2なので、このままPCが朽ち果てるまでIE7でよいと思っていたが、最近はIE7をサポート終了するサイトが増えてきたし、閲覧中に固まる頻度も激しくなったので、最後のバージョンアップということでIE8にした。IE9以上はWindows 7を買うことになる。

バージョンアップ直後から、顕著な不具合に2点気づいた。スタイルシートの互換性については、ネット上で多くの方が書かれていたが、私の場合はWordPressの特定テーマに起因することなので、改めて指摘しておきたい。

Google AdSenseの表示が不安定になる

Google AdSenseの枠は表示されるのに、内容が表示されない状態になった。下記のようなイメージで、右上の(i)のアイコンにオンカーソルすると、ちゃんと「Ads by Google」と表示されるので、枠自体は生きている。

内容が表示されないGoogle AdSenseの枠

再読み込みしても改善されず、ページ内でAdSenseを複数貼っている場合は、起きる位置も様々だ。すべてのAdSenseがこうなるわけではなく、同一ページで正常で表示されているものもある。

FireFoxだとすべて正常に表示されるので、これはIE8へのバージョンアップに伴うものと判断。Googleプロダクトフォーラムのやりとりを見て、キャッシュのクリアを行なったら解消した。IE7時代のキャッシュが不具合を起こしていたと思われる。

Googleプロダクトフォーラム「アドセンス広告が表示されません」

WordPressのスタイルシート反映が不安定になる

IE8はスタイルシートの解釈がIE7と異なるが、WordPressで作成していれば問題ないだろうと、いままで気にしていなかった。通常のテーマならDOCTYPE宣言は「XHTML 1.0 Transitional DTD」なので、IE8ではIE8標準モードでレンダリングされる。

私がWordPressで運営している他サイトは問題なかったが、当サイトで使用しているテーマ「PlaintxtBlog」がおかしい。コンテンツ内の<a>タグにオンカーソルすると、全く別のセクションのフォントサイズが変動する。そもそも、IE7/8でフォントサイズに影響するスタイルの差異はないはずで、スタイルシートの反映が不安定になっているとしか言いようがない。もちろん、FireFoxだと正常。

IE8標準モードで起きる現象なのは間違いないため、マイクロソフトのMSDN「ドキュメント互換性の定義」に従って、header.phpに<meta>タグでドキュメント互換モードを指定した。強制的にIE7標準モードにすることで、とりあえず表示は直った。

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

しかし、以前からIE8を使っていた人にはずっとこの状態で見えていたわけで、忸怩たる思い。自分でIE8を使わない限り、これは気づかないものなあ……。当サイトを訪れる人のうち、IE8ユーザは現在24.4%。これだけの読者に影響を与えていたことになる。

いったい、なにが悪さをしているのか。いろいろ試したところ、PlaintxtBlogが独自に設定している「Theme Options」が原因と思われる。ここでベースフォントサイズとして70%を指定し、style.cssとは別にヘッダー内に直接書き込んでいる。これがIE8標準モードのレンダリングに影響を与えているようだ。

PlaintxtBlog Theme Options