IE7・8も簡単に対応! IEのバージョンごとに cssを適用させるhtml・cssハック
2016年12月8日

コーディングをしていて、未だにIE7,8以下を対応することがあるので、IEのバージョンごとに適用できるhtml・cssハックを備忘録として残しておきます。
html・cssハックを書いた際に、IEの対象ブラウザ含め、その他ブラウザでの表示確認は忘れずにしましょう。
IEの旧バージョンが早くなくなってほしいと願うばかりですね。。
では、下記に記載しておきます!
html・cssを使って記述する方法
htmlの<head>内に適用したいIEのバージョンを記述する
1 2 3 4 5 6 7 8 9 10 |
<head> <!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> </head> <body> <p class="sample">サンプル</p> </body> |
css
1 2 3 4 |
.ie6 .sample {color: #aaff44;} /* 黄緑 */ .ie7 .sample { color: #88ffff;} /* 水色 */ .ie8 .sample { color: #ccaaff;} /* 紫 */ .ie9 .sample { color: pink;} /* ピンク */ |
上記の通り、htmlのhead内で、IEのバージョンによって<html>タグにclassを付与する宣言をし、そのclassに対してcssを指定してあげるという方法ですね。
個人的にはこれが一番簡単でie用のスタイルを適用した箇所を探す際にも管理がしやすいかと思います。
スポンサードサーチ
cssのみでIEバージョン別に指定する方法
次に、cssのみで指定する方法です。
html
1 2 3 |
<body> <p class="sample">サンプル</p> </body> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* IE7のみ */ *:first-child+html .sample { color: #333; } /* IE8以下 */ .sample { color: #333\9; /* IE8以下 */ } /* IE9 */ .sample(:target) { color:#333\9; } /* IE10以降 */ @media all and (-ms-high-contrast:none){ .sample { color: #333; } } /* IE11のみ */ @media all and (-ms-high-contrast:none){ *::-ms-backdrop, .sample { color: #333; } } |
上記の記述をすることで、IE7、8、9など個別でcssの指定ができます。
基本的にはこのようなハックは使わずに実装することが望ましいですが、対応案件がある度に調べていたので、その中でも良いと思った記事から抜粋させて頂きました。
サイト管理者様、ありがとうございます。
参考サイト:
http://www.conifer.jp/csstest/css-ie-version.html
http://every-rating.com/html-css-js/css-1.html