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

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

ssl_ie8_photo_01

こんにちは!

先日、コーディング作業をしていると突然、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_ie8_photo_02

作成していたのが保険無料相談のサイトでセキュリティの為に「お問い合わせフォーム」に「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が反映されなくなった件

公開日:2014/03/02
最終更新日: 2015年1月5日
カテゴリー:CSS, jquery・js

関連記事

responsive_thumbnail

2014/07/25

レスポンシブWEBデザインのCSSの書き方!

カテゴリー:CSS
最終更新日: 2015年2月27日

記事を読む

commentout_photo_01_cach

2013/11/11

WordPressのおすすめコメントアウトの方法!

カテゴリー:CSS, WordPress
最終更新日: 2015年2月19日

記事を読む

google-adsense-photo_01_cach

2013/09/29

Google Adsenseを読み込む時に背景色が一瞬、黄色になるのは何故?

カテゴリー:CSS
最終更新日: 2016年1月2日

記事を読む

新着記事

コメント/トラックバック

トラックバック用URL:

この投稿のコメント・トラックバックRSS




管理人にのみ公開されます

正しい数値を入力して下さい *
Time limit is exhausted. Please reload CAPTCHA.

最新の記事

カテゴリー

過去の記事

プロフィール

  • 著者:Masaki Yamashita

    大阪でWEB制作の仕事をしています。
    WEBデザイン、コーディング、WordPress・EC-CUBEの設置やカスタマイズなど何でもやっています。

follow us in feedly