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

2016年12月8日

コーディングをしていて、未だにIE7,8以下を対応することがあるので、IEのバージョンごとに適用できるhtml・cssハックを備忘録として残しておきます。
html・cssハックを書いた際に、IEの対象ブラウザ含め、その他ブラウザでの表示確認は忘れずにしましょう。

IEの旧バージョンが早くなくなってほしいと願うばかりですね。。
では、下記に記載しておきます！

スポンサードサーチ

html・cssを使って記述する方法

htmlの＜head＞内に適用したいIEのバージョンを記述する

<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>

<head>

</head>

<body>

</body>

css

.ie6 .sample {color: #aaff44;} /* 黄緑　*/
.ie7 .sample { color: #88ffff;} /* 水色　*/
.ie8 .sample { color: #ccaaff;} /* 紫　*/
.ie9 .sample { color: pink;} /* ピンク　*/

.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

<body>
<p class="sample">サンプル</p>
</body>

<body>

</body>

css

/* 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;
}
}