IEでCSSが反映されない？解決策を紹介します

XeoryBaseにテーマを変えて、IEで表示チェックしてないことに気がつきました。

「普通に表示されてるだろう」と思っていたら、何とIEではCSSが適用されていない状態でした。

今回は、なぜか特定のブラウザだけCSSが適用されていなかった要因と、解決した方法を紹介します。

InternetExplorerだけCSSが適用されない？

ブログの執筆にはMacを利用していてブラウザもChrome。

表示チェックはMacのChrome、SafariとiPhoneのSafariくらいでしかやっていませんでした。

ふとWindowsのパソコンで表示チェックしてなかったなと思いIEで開いてみたところ、

CSSが適用されていない！

あれ？CSSは？

困ったことに全くCSSが適用されていない状態。この状態で2日以上運営してたので、IEでサイトに来てくれた方は「何このサイト？」と思われたに違いありません。

自分が使ってるIEだけの問題かと思い、Microsoftのデベロッパーサイトで確認してみました。

色んなブラウザでの表示チェックができて便利！

ダメか…ここで見てダメならどのIEから見てもCSSは適用されていないはずです。

そしてEdgeでも同じ表示か…FireFoxの表示も何かおかしい…

ちなみに、マイクロソフトの表示チェックツールは以下のページから利用できます。

● Browser screenshots

対象サイトのURLを入力するだけで、それぞれのブラウザでの表示を一覧で出してくれます。

多少表示に時間がかかるのと、URLを入力したページの表示チェックしかできませんが、さっとチェックしたいときには便利です。

Mac環境でMicrosoftのブラウザチェックをしたいときは積極的に活用したいですね！もっとしっかりチェックしたい場合は、VMなどの仮想環境を利用してのチェックとなります。

いずれは検証のために導入したいと考えています。

特定ブラウザだけでCSSが適用されない要因は？

全てのブラウザで適用されないのであれば、CSS呼び出しの書き方が悪いかCSSファイル内に致命的な記述ミスがあるとわかりますが、特定のブラウザだけというのが引っかかりますね。

切り分けのために、カスタマイズしていない“親テーマ”のXeoryBaseを適用しました。

カスタマイズしていないXeoryBaseを適用した結果

正常に表示された

この切り分けで、カスタマイズ時に致命的なミスがあったということがわかります。

文字コードの指定か？style.cssをテキストエディタで開いたときに余分なコードが入り込んだ？など一晩悩みましたが、とんでもない初歩的なミスでした。

CSSが適用されなかった要因

今回、特定のブラウザでだけCSSが呼び出せなかった要因は、

スタイルシートを呼び出す「@import url 〜」部分の「’」が全角になっていたからでした。

よく見たら最初の「’」全角

初歩的なミスですが、よく見ないとわかりませんでした。

半角に修正！

半角に修正することで、すぐに解決！

全てのブラウザで表示OK!

よかった！全てのブラウザできちんと表示されるようになりました。

なぜIE、Edgeだけ正常表示されていなかったのか？

特定ブラウザでだけCSSの読み込みが正常に行えなかったのは、ブラウザのスタイルシート読み込みの仕様や文字の解釈の仕様によるものと考えられます。

詳細な仕様はわかりませんが、おそらくIEやEdgeなどのブラウザの方が、より正確に記述されていないと正しく読み込まれないのだと思います。

ChromeやSafariの方がそのあたりの許容範囲がやや広いようですね。

しかし、今回の問題を教訓に、自分が使用していないブラウザでの表示チェックもしっかり行う必要があると思い知らされました。

まとめ：ブラウザの表示チェックは入念に

今回は、自分の守備範囲のブラウザでしか表示チェックしなかったために、問題に気づかず数日放置してしまうことになりました。

特にMacユーザーの方は、IEなどのMicrosoft系のブラウザでの表示チェックはしっかり行った方がよいと思います（仕様が大幅に違うと考えられるため）

当ブログは、ブラウザはSafari（Mac、iPhone両方）が47%、Chromeが31%と、MS系のブラウザからのアクセスは少なめですが、やはりIEのシェアはかなり大きいのでしっかりとした対応が必要です。

今後は、表示チェック用のWindows仮想環境も導入できればと思います！

それでは、よいブログライフをお送りください^^