Internet Explorer 8で印刷スタイルシートがHTML5タグに反映されないときの対処法

問題の概要

Internet Explorer 8(IE8)は、HTML5で新たに追加された要素(section、article、header、footerなど)を標準状態では認識しません。そのため、画面上の表示だけでなく、印刷用のスタイルシート(印刷スタイルシート)もHTML5タグに対して正しく適用されないという問題が発生します。

解決策1:html5shivを利用する

最も手軽で確実な解決方法は、「html5shiv」というJavaScriptライブラリを読み込むことです。html5shivは、旧式のInternet ExplorerでもHTML5のセクショニング要素を使用できるようにするポリフィルで、IE6〜IE9向けに基本的なHTML5スタイリング機能も提供してくれます。

ページのhead要素内に、以下のようなコードを追加しましょう。

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

条件付きコメントを使用することで、IE9未満のブラウザでのみスクリプトが読み込まれ、モダンブラウザには一切影響を与えません。

解決策2:document.createElementで要素を作成する

外部ライブラリを使わずに対応したい場合は、JavaScriptのdocument.createElementメソッドでHTML5要素を明示的に生成する方法もあります。IEは未知の要素でも、createElementで一度生成するとCSSが適用可能になる仕組みのためです。

var demo = document.createElement("demo");
demo.innerHTML = "Working!";

document.appendChild(demo);

このように、使用するHTML5の新要素やカスタム要素を事前に生成しておくことで、スタイルシートが正しく機能するようになります。

まとめ

IE8でHTML5タグに印刷スタイルシートが効かない場合は、html5shivの導入が最も簡単な対策です。レガシーIEへの対応が必要なプロジェクトでは、ぜひ活用してみてください。