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; } } |
上記の記述をすることで、IE７、８、９など個別でcssの指定ができます。
基本的にはこのようなハックは使わずに実装することが望ましいですが、対応案件がある度に調べていたので、その中でも良いと思った記事から抜粋させて頂きました。
サイト管理者様、ありがとうございます。
参考サイト：
http://www.conifer.jp/csstest/css-ie-version.html
http://every-rating.com/html-css-js/css-1.html
関連記事
2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
2016年6月6日 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法
2017年11月11日 【jQuery】スライドショーとポップアップ（モーダル）を両方使用し、作成したサンプル
2017年4月19日 超便利！ img要素を表示領域（枠内）で上下左右に中央表示させる方法
2016年8月17日 【css】文章中に改行がある時に、行頭を揃える小ワザ
