こんにちは！
先日、コーディング作業をしていると突然、Internet Explorer 8(以下、IE8)のヘッダーとフッター部分のCSSが効かなくなってしまいました。
HTML5タグの「headerタグ」と「footerタグ」が原因？
途中まで何の問題もなかったのに「何故？」と思いながら調べてみると、どうやらヘッダーとフッター部分で使用している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が効かない！」でした！
それではまた。
コメント