WordPress化によるIE崩れの原因と対策。

Tips / /
※WordPress対応サイト公開時に発生したIEでのレイアウト崩れ。

WordPress化の前のhtmlファイルで何度も確認したはずなのに、予想を遥かに上回る崩れっぷり(汗)

Googleクロームやファイヤーフォックスではいたって正常に表示されてるし、CSSのIE対策は施したはずだし、Wordpressとの相性の問題かなと思いつつネットで検索しても当てはまる情報は全く無し。

レイアウト崩れの画面です。(Windows7 IE9 での画面)

もう一度膨大なCSSファイルの書き直しかと落胆していたら、ふと思い当たることがありました。

「たしかIEってドキュメント宣言(htmlファイルの最初にある<!DOCTYPE html>です)の前にコメントが入るとトラブルの元…」

そうです、Wordpressのテンプレートを作る際、headerテンプレートを読み込む前に<–ここからヘッダーテンプレート–>とコメントを記述していたのが原因でした。
そのコメントのせいで、IE はドキュメント宣言がおかしくなり、CSSをまともに読めなくなっていたのでした。

一行目のコメントが原因でした↓

<!--ヘッダーテンプレート読み込み-->
<?php get_header(); ?>

これってWordpress初心者にありがちなミスですよね……(ひょっとして私だけ(汗))