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の要素認識されない問題
メディアクエリ認識されない問題
見た目問題
重くなったり画面遷移がうまくいかなかったり不自然だったので最終的には外しました
- 透過しない
- 角丸にならない
- etc...
SVG使えない
PNGに差し替えた
flexbox使えない
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')
こんな感じに指定した。