IE9まででいいやと思っていたらIE8対応が必要になったので頑張った軌跡

IEどこまで対応するか問題

※ 要アップデート = プリインストールされているバージョンではない
※ 完全対応 = プリインストールされているバージョンである

• IE6
  • 難易度★★★★★★★★★★
  • Windows 2000まである程度対応したい場合(要アップデート)
• IE7
  • 難易度★★★★★★
  • Windows Vista以降に完全対応したい場合
• IE8
  • 難易度★★★★★
  • Windows XPまである程度対応したい場合(要アップデート)
  • Windows 7以降に完全対応したい場合
• IE9
  • 難易度★★★
  • Windows Vistaまである程度対応したい場合
• IE10
  • 難易度★
  • Windows 8以降に完全対応したい場合
• IE11
  • 難易度★
  • Windows 7まである程度対応したい場合(要アップデート)
  • Windows 8.1以降に完全対応したい場合
• Edge
  • 難易度★
  • Windows 10以降に完全対応したい場合

参考
各Windows OSで利用できるIEのバージョンを知る

Internet Explorer環境構築(Mac)

Parallelsをインストール(2週間トライアル)
以下のWindowsとIEが無料でインストールできる(各インストールに1時間弱かかる)

• Windows 7 - IE 8
• Windows 7 - IE 9
• Windows 7 - IE 10
• Windows 8 - IE 11
• Windows 8 - Edge

js問題

jQuery 1.12.4

IE8対応の最終バージョンをダウンロード
https://code.jquery.com/jquery/#jquery-all-1.x

Lodash 3.10.1

IE8対応の最終バージョンのRails gem

gem 'lodash-rails', '~> 3.10', '>= 3.10.1' #for ie8

riot.js

諦めた

DateでtoISOString()使えない

Adobe Typekit使えない問題

IEのバージョンに応じてコメントアウトする

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="https://use.typekit.net/rjv5ste.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<!--<![endif]-->

これでIE9未満orIE以外のブラウザのみif内のブロックが実行される。
詳しくは以下。
https://ja.wikipedia.org/wiki/%E6%9D%A1%E4%BB%B6%E4%BB%98%E3%81%8D%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88

.filter()とか.reduce()とか.map()とか使えない問題

他の書き方に変えるか諦めて機能を省略する。
デバッグするMPが足りなかったので機能を省略した。

if (userAgent.indexOf("msie") != -1) {
  if (appVersion.indexOf("msie 6.") != -1) {
    // IE6
  } else if (appVersion.indexOf("msie 7.") != -1) {
    // IE7
  } else if (appVersion.indexOf("msie 8.") != -1) {
    // IE8
  } else {
    // IE9以上かつIE以外のブラウザ
  }
}

どこかから引用させてもらったのですが履歴を辿っても見つからなかった...すみません。

HTML/CSS問題

html5の要素認識されない問題

html5shiv

メディアクエリ認識されない問題

css3-mediaqueries-js

見た目問題

重くなったり画面遷移がうまくいかなかったり不自然だったので最終的には外しました

• 透過しない
• 角丸にならない
• etc...

ie9-js

SVG使えない

PNGに差し替えた

flexbox使えない

flexibility.js

background-size使えない

基本使わない方向で調整した。

色々やり方はあるみたい。
https://qiita.com/SotaSuzuki/items/03af307ae70a6025da41

transform使った中央寄せのCSS使えない

transformを使わない中央寄せスタイルに直した

position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;

こういうやつ

その他プロパティ

• 見た目が変な所を中心にCSS3を使っている箇所を書き換えた
• 機能に問題ない範囲で display:none した

参考：
http://webdev.jp.net/ie8-css-impossibility/

config.assets.js_compressor問題

圧縮後のjsがIE8でうまく読み込めなかったので対応。
一般的にはstaging/production環境でしか再現しない系なのでリリース前に要確認。
config/environments/production.rbまたはconfig/environments/staging.rbの

config.assets.js_compressor = :uglifier

をuglifier以外のコンプレッサーに変える。yuiなどいくつか試しましたがGoogle Closure CompilerをSIMPLE_OPTIMIZATIONSモードで圧縮するとうまくいった。

gem 'closure-compiler', '~> 1.1', '>= 1.1.12'

Gemfileに追記してbundleして

config.assets.js_compressor = Closure::Compiler.new(compilation_level: 'SIMPLE_OPTIMIZATIONS')

こんな感じに指定した。