SSLを設定したらIE8でCSSが効かない！

公開日：2014年3月2日
最終更新日: 2015年1月5日

こんにちは！

先日、コーディング作業をしていると突然、Internet Explorer 8(以下、IE8)のヘッダーとフッター部分のCSSが効かなくなってしまいました。
途中まで何の問題もなかったのに「何故？」と思いながら調べてみると、どうやらヘッダーとフッター部分で使用しているHTML5タグの「headerタグ」と「footerタグ」が効いていない感じです。

「HTML5タグが効いてないという事は「html5.js」が読み込まれていないって事？」

と思いながら調べるとやはり「html5.js」が読み込まれていません。

ちなみに「html5.js」は何かというと、IE8以下のブラウザではHTML5に対応していませんが「Google Code」で公開されている「html5shiv」スクリプトを利用すれば、IE8以下でもHTML5を使用する事が出来ます。その為に読み込むjavascriptライブラリが「html5.js」です。

</head>内に以下のコードを記述すれば、HTML5を使用出来ます。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

今回は上記のコードが読み込まれなくなった為に、レイアウトが崩れてしまったみたいです。

ならばそのキッカケは何だったのか更に調べてみると、どうやら「SSL」が原因だという事が分かりました。

「SSL」を導入すると以下の様に「http」が「https」のURLになります。

作成していたのが保険無料相談のサイトでセキュリティの為に「お問い合わせフォーム」に「SSL」を導入していたのですが、その「SSL」を導入した「お問い合わせフォーム」のヘッダーとフッター部分のレイアウトが崩れてしまってました。

しかも何故かIE8のみ。他のブラウザ(IE9・IE10・Firefox・Chrome)では問題ないのに。さっぱり意味が分かりません。

一旦、解決策として外部で読み込んでいた「html5.js」を保存して自サイト内で読み込む様にしました。

以下のコードに変更。

<!--[if lt IE 9]>
<script src="http://自サイトのURL/html5.js"></script>
<![endif]-->

上記のコードに変更したら「html5.js」が読み込まれるようになり、レイアウト崩れもなくなりました。何にしても解決して良かったです。

最後に！

IE8だけ読み込まれないというのが気持ち悪いです。本当にIEは困ったブラウザですね。何んとかならないものでしょうか？

何故こんな事になるのか、ご存知な方はぜひ教えて下さい。
以上「SSLを設定したらIE8でCSSが効かない！」でした！

それではまた。

【その他「IE」関連の記事です】
サイト制作時にお勧め！開発者ツールでInternet Explorerのクロスブラウザチェック！
IEでGoogleツールバーを使用すると404ページが正しく表示されない！
「Internet Explorer」にウンザリな理由！

下記は参考にさせて頂いた記事になります。有難うございました。

【D*B:dischord】
SSLにしたらIE8でCSSが反映されなくなった件

関連記事

新着記事