最初に
IE11においてウェブサイトのレイアウトが崩れたため、その対策を考える必要があった。
レイアウト崩れの対策として、以下の３点があることを知った。
- メディアクエリを利用し、CSSの設定を行う
- jQueryを用いて専用クラスを追加し、CSSの設定を行う
- JavaScriptを用いて、CSSを切り替える
今回は、メディアクエリを用いてレスポンシブ対応するため、メディアクエリの設定が煩雑になること、jQueryを利用しない場合を考えてJavaScriptを利用することにした。
※メディアクエリを利用する場合は、ブラウザ判定する条件とレスポンシブ用の条件を入れ子構造で対応するにはLessやSassが必要になる（CSSのみでは出来ない）。
また、ブラウザ判定のための「-ms-high-contrast」の使用は良くないという記事もあるので気をつける必要がある。（Edgeに対する判定が別途必要であったり、ハイコントラストモードの設定によって、IEに適用されない場合がある）
参考ページ
JavaScript Tutorial
開発者向けのウェブ技術
HTMLクイックリファレンス
JavaScriptを使って、linkタグで外部cssを読み込みたい
-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由
参考ソースコード
テスト用に作成した、IE11で開くと背景が黒・文字が白、
IE11以外で開くと背景が白・文字が黒となるように設定した
ソースコードを記載する。
html
<!DOCTYPE html>
<html lang="jp">
<link id="layout-css" href="./css/common.css" rel="stylesheet">
<script>
function changeCSS(newCSS){
var target = document.getElementById('layout-css');
target.href = newCSS;
}
var userAgent=window.navigator.userAgent;
if(userAgent.indexOf('Trident')!=-1){
document.write(userAgent,'<br><br>',data='OK! IE11');
changeCSS('./css/IE-layout.css');
}
else{
document.write(userAgent,'<br><br>','No! IE11');
};
</script>
</html>
IE11以外のCSS
@charset "utf-8";
html {
background: white;
color: black;
}
IE11用のCSS
@charset "utf-8";
html {
background: black;
color: white;
}