ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

ヤビブロ

  • ホーム
  • ブログ
  • お問い合わせ

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

2016年12月8日
htmlcss

コーディングをしていて、未だに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

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

関連記事

  • 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法2016年11月10日 「もっと見る」ボタンの「>」矢印アイコン画像をレスポンシブでも位置を綺麗に表示する方法
  • 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法2016年6月6日 【css】counter-incrementプロパティを使ってcssでリストに番号をふる方法
  • 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル2017年11月11日 【jQuery】スライドショーとポップアップ(モーダル)を両方使用し、作成したサンプル
  • 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法2017年4月19日 超便利! img要素を表示領域(枠内)で上下左右に中央表示させる方法
  • 【css】文章中に改行がある時に、行頭を揃える小ワザ2016年8月17日 【css】文章中に改行がある時に、行頭を揃える小ワザ

スポンサードリンク

  • 最近の投稿

    • 【基礎】Vue.jsの『コンポーネント』とは?【基礎】Vue.jsの『コンポーネント』とは?2019年6月25日
    • 【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法【Yarn + Vue CLI】を使って簡単にVue.jsの環境構築をする方法2019年6月17日
    • コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法コピペでOK!Vue.jsで『ハンバーガーメニュー』を実装する方法2019年3月8日
    • 【Mac】vscodeの拡張機能を一括インストールする方法【Mac】vscodeの拡張機能を一括インストールする方法2019年3月8日
    • js不要!cssのみで『無限ループスライダー』を作成する方法js不要!cssのみで『無限ループスライダー』を作成する方法2019年2月24日
    • jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法jQuery・vue.js不要!javascriptで複数対応のアコーディオンを作成する方法2019年1月30日
    • 【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法【git】新規作成、複製したファイルがsourcetree上で反映されない!?そんな時の解決法2019年1月30日
    • 【css】文字(テキスト)にborderをつけるように縁取りをする方法【css】文字(テキスト)にborderをつけるように縁取りをする方法2019年1月30日
  • カテゴリー

    • AMP (2)
    • android (1)
    • atom (2)
    • css (25)
    • facebook (1)
    • font (1)
    • form (1)
    • FTP (1)
    • git (3)
    • gulp (3)
    • html (2)
    • IE (1)
    • instagram (1)
    • iphone (3)
    • jquery (13)
    • js (5)
    • Mac (10)
    • Photoshop (5)
    • SourceTree (5)
    • Subversion (1)
    • twitter (1)
    • Vue.js (3)
    • Webフォント (1)
    • windows (2)
    • WordPress (7)
    • お知らせ (1)
    • サクラエディタ (1)
    • セキュリティ (1)
    • パララックス (1)
    • 便利ツール (6)
    • 差分チェック (1)
    • 日記 (4)
  • アーカイブ

  • タグ

    android atom background-image before break-all clcl clipmail counter-increment cssハック facebook git github html IE11 instagram iphone ipアドレス linear-gradient Math.random mCustomScrollbar Noto Sans Japanese select snapwidget SourceTree table tool transform transition twitter url改行 windows word-break お問い合わせ コピペ サクラエディタ スクロールバー タスクバー テキストエディタ パッケージ フォーム プラグイン 埋め込み 擬似クラス 改行コード 純正ボタン

    Copyright © 2016 ヤビブロ All Rights Reserved.