ブログ名の設定は、まだ。 ネット社会の一粒の"地の塩"でありたいと思っています。

最近(2016年春)あったHTML5のIE8対策の話。

2016年03月30日 · カテゴリ:雑記

2016年1月13日にIE8~10のサポートが終了し、Web制作者や開発者にとっては1つの朗報となりました。一般のIE8のシェアも無視可能なレベルかと思いますが、残念ながらまだ企業内にはシステムや管理上、IE8が残っていたりするわけで、改めてその対応が必要な某案件に苦慮しました。

そもそも新規構築するようなサイトであれば、HTML5はまあ当然かと思います。
そこでIE8にどう対応させるかは、プロのコーディングの方々は、HTML4.01にちょっとHTML5のタグを足す感じで(HTML5タグにCSSを指定しない)方法をとるか、IE8にHTML5のタグを認識させるhtml5shiv.jsを読み込ませて使うか、となります。

今回対応をした案件では、IE8~10のサポートが終了したということもあって、対応期間は短いだろうという考えで(IE8対応が不要になったとき)スクリプトの読み込みを削除すれば済む「html5shiv.jsを読み込ませる」方法をとりました。

ただしここに1つ、注意しておくべき点がありました。
html5shiv.js は、IE8ブラウザ表示は特殊なタグや角丸が角丸にならない等は別として、おおむね問題ないレベルで表示をしてくれますが、印刷が見事に崩れます。

確かに
https://github.com/afarkas/html5shiv
からDLしてくると「html5shiv.js」と「html5shiv-printshiv.js」が同梱されており、「html5shiv-printshiv.js」は「html5shiv.js」に印刷時の対応がある旨、説明がありました。

前者が11kbで後者が16kb(minだと3kb/5kb)の差とはいえ、つい軽い前者を選びがちですが、もし印刷までフォローが必要なサイトだとしたら、「html5shiv-printshiv.js」を読み込む必要があります。

それともう1つ。
「互換表示モード」でレイアウトが崩れる、もしくは正しく表示されないケース。

対策としては標準モードになるようメタタグに
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
を読み込ませるだけですが、なぜ正しく表示されないのか、最初がなかなか気づきませんでした。

実はテスト環境ではIE8でも正しく表示されていたのに、本番環境に持っていったらオカシクなってしまったところで、その差分を探しまくりました。

最初はファイルの差分。
次にブラウザの設定。IEは「互換表示設定」があり、「イントラネットサイトを互換表示で表示する」がデフォルトなので、今回のサイトもクローズドのため、そう判断されたのかもしれませんが、チェックを外しまても解決しませんでした。

結論としては上記に書いた(標準モードにさせる)メタタグを入れて解決しました。

原因は、ひょっとしたら本番サーバの環境がそうさせていたのかも知れません。
Apache、もしくはIISにカスタム HTTP 応答ヘッダにて互換表示モードを指定していたのかも。(憶測です)

« 1つ古い記事:

1つ新しい記事: »

Leave a Reply

Trackback URL

記事テーマと関係ないとか、リンクがない場合(一方的TB)、あとアダルトサイトは申し訳ないですが承認しませんので予めご了解ください。またrel="nofollow"つけてるので、SEOのリンクジュースが目的のコメント、TBは残念ながら効果が無いと思います。予めご承知おきください。