日本ではトップのシェアを誇るMicrosoft社のウェブブラウザ「Internet Explorer」ですが、Google ChromeやFirefox、Safariなど他のブラウザと挙動が異なる部分もあり、ウェブ制作をしている方は悩むケースもあるかと思います。今回はウェブサイトをInternet Explorer（IE）でも問題なく表示させるためのテクニックをまとめていきたいと思います。
古いバージョンのIEについて
最近ではだいぶシェアが少なくなってきた古いバージョンのIEですが、環境によってはまだまだ現役のウェブブラウザでもあります。
【WindowsのOSごとの利用できるIEのバージョン】
| Windows XP |
IE6、IE7、IE8 |
| Windows Vista |
IE7、IE8、IE9 |
| Windows 7 |
IE8、IE9、IE10、IE11 |
| Windows 8 |
IE10 |
| Windows 8.1 |
IE10、IE11 |
| Windows 10 |
IE11、Edge |
WindowsXPのサポートはすでに終了しましたがユーザーも多く、特にIE8なんかは案件によって対応が必要なところもあるかと思います。しかし困ったことに、古いバージョンのIEでは一部のHTML5やCSS3の機能に対応していません。
そのため、レイアウトが崩れたりデザインが変わってしまったり、さらにはページが正常に表示されないといった問題が出てきます。そこで、javascriptのプラグインやCSSハックと呼ばれるテクニックを使って対応していきます。
古いバージョンのIEで起こる表示上の問題点
IEではバージョン別に異なる表示上の問題点（バグ）があります。細かなものを含めるとかなりの数があるようですが、、ここでは代表的なものを挙げていきます。
【floatとmarginを併用時にmarginの値が2倍になる】（IE6）
→ display: inline ; を追加します
・floatと同じ方向に設定したmarginの値が2倍になる
【IE7以前のCSSレイアウトズレ（hasLayout）】（〜IE7）
→ zoom: 100% ; を追加します
・IE7以前の仕様であるhasLayoutというプロパティによるバグ
【z-indexの重なり順がおかしくなる】（〜IE8）
→ 親要素にもz-indexで重なり順を指定する
・positionプロパティのabsoluteもしくはrelativeを設定した場合はz-indexがリセットされてしまう
【@importルールの制限によるパフォーマンス低下】（〜IE9）
→ @importの使用を控え、linkタグで対応
・@import使用時に読み込み順がランダムになったり、制限を超えるファイルは読み込まれないなどがあります
HTML5とCSS3への対応状況
近年のウェブ制作においては欠かすことのできないHTML5とCSS3ですが、古いバージョンのIEでは全ての機能が対応していません。バージョンごとの対応状況はこちらのサイトで確認ができます。
【findmebyIP】
http://fmbip.com/litmus/
古いバージョンのIEへの対策テクニック
これらを踏まえて、古いバージョンのIEでもウェブサイトを綺麗に表示できるよう対策をしていきます。具体的に大きく分けると次の3種類が挙げられます。
- 1. プラグインを使用する（javascript）
- 2. 条件付きコメントを使用・ドキュメントタイプを定義（HTML）
- 3. CSSハックを使用する（CSS）
プラグインを使用する
未対応のHTMLタグ要素やCSSプロパティに対応させるための各種プラグインを導入します。
HTML5追加タグを使えるようにする【html5shiv.js】
https://code.google.com/p/html5shiv-printshiv/
IE8以下のブラウザにHTML5で新たに追加された要素を、きちんと認識させるためのライブラリです。これでheaderタグやsectionタグなどが使えるようになります。
IE6・IE7・IE8のバージョンをIE9の仕様に近づける【IE9.js】
https://code.google.com/p/ie7-js/
IE9以下のバージョンをIE9の仕様に近づけることにより、古いバージョンのIE特有のバグを防ぐことができ、IE9と同じ方法でコーディングができるようになります。
IE8以下でメディアクエリーを使用できる【Respond.js】や【css3-mediaqueries-js】
https://github.com/scottjehl/Respond
https://code.google.com/p/css3-mediaqueries-js/
IE8以下ではメディアクエリーが使えないためレスポンシブデザインが実装できません。これらのプラグインでメディアクエリーを有効化させます。
IE8以下でCSS3の未対応セレクタを使用できる【Selectivizr.js】
http://selectivizr.com/
last-childやnth-childなどIE8以下になるとほとんどのセレクタが対応していません。これらのセレクタが使えることでより効率的にコーディングをすることができます。
CSS3で新たに追加されたプロパティを使用できる【PIE.js】
http://css3pie.com/
CSS3ではいろんな機能が実装できるプロパティが新たにたくさん追加されました。しかしIE9では対応しているものに限りがあり、IE8以下になるとほとんど未対応なのが現状です。このプラグインを使うことでそれらのプロパティも同じように使えるようになります。また同等の機能でhtcファイルバージョンのPIE.htcなるものも存在します。
IE8以下で透過PNGを扱えるようにする【jQuery.belatedPNG】
https://github.com/wakuworks/jquery.belatedPNG/
昨今のデザインでは欠かすことのできない透過のPNGですが、IEの古いバージョンになりますとアルファチャンネルがきちんと処理されず、透過部分がグレーや黒くなって表示されてしまいます。
完全には難しいですがプラグインを使うことで、古いバージョンのIEをより新しい仕様と同じように扱えるようになります。もちろん全て必要というわけではなく、ファイルサイズも考える必要がありますのでケースによって必要最低限のものを使うのがベターだと言えます。次回は引き続き、条件付きコメントをやCSSハックを使った方法をまとめていきたいと思います。
