IEチェックでの修正に必須!IEの条件分岐&IE7やIE8などのCSSハック一覧をまとめてみました。

ie-hack

IEの条件分岐とCSSハックをまとめてみました。

IE対応するためにhead内に条件分岐すると便利なんですがよく忘れてしまうので備忘録としてまとめておきます。

IEの条件分岐

IE全てに適用

<!--[if IE]>
ソースコード
<![endif]-->

IE8以上

<!--[if gte IE 8]>
ソースコード
<![endif]-->

IE8未満(IE7, IE6など)

<!--[if lt IE 8]>
ソースコード
<![endif]-->

IE8のみ

<!--[if IE 8]>
ソースコード
<![endif]-->

IE7のみ

<!--[if IE 7]>
ソースコード
<![endif]-->

CSSハック

IE6以下

#help_me { _color: blue; }
もしくは
* html #help_me  { color: red; }

IE7

*:first-child+html #help_me { color: red; } 
もしくは
*+html #help_me {  color: red; }

IE6, IE7

#help_me { /color: blue; }

IE8

#help_me { color: blue9; }

IE7, IE8

#help_me { color/***/: blue9; }

<h3>IE6以外</h3>
1
#help_me { color/**/: blue; }

IE6, IE7以外

html>/**/body #help_me { color: red;}

IE6〜IE8以外

:root *> #help_me { color: red;}

Firefoxのみ

#help_me, x:-moz-any-link { color: red; }

Google Chromeのみ

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #help_me {
        margin-top: 0;
    }
}

CSSハックは個人的に最終手段と思っています。
極力使わない方向で考えたいものですね。

おすすめ記事

  • Pocket
  • LINEで送る
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

[IE対策]IEでfade効果などをさせた場合のPNG画像が透過されない(黒くなる)時の対処法
IE8以下でCSSで背景を指定したのに全く表示されない時にチェックしておきたいポイント
WordPressをインストールしたディレクトリと同じ階層にindex.htmlがある時の開発準備TIPS
プレビューを見ながら簡単にスタイリッシュなグラデーションを作成できるCSS3ジェネレーター「Ultimate CSS Gradient Generator」
Sublime Text 2で自動補完してさらさら~っとHTMLやCSSを記述する方法
Webサイトを制作したらしておくべきチェックリスト
Web制作にルーチンワークに便利!Googleスプレッドシートを利用した簡単html生成法
IE7でdisplay:inline-blockを適用させる方法
楽天ショップのリンク付きの縦バナーを設置する方法
これだけあればOK! WEB制作で必須の簡単なURLを入れるだけでダミー画像が作れるWebサービス3選
Web制作者に必須のFTPクライアントソフト!FileZillaのメリットとは?
Web制作のグラデーションに便利なCSS3ジェネレーターまとめ ※随時更新
最近残りやすくなったな~って感じるWEB製作者の皆様!Clear Cashがめっちゃ便利と強く言いたい!
GitHubGistでWhoops.と表示された時の対処法
PC・スマホでMedia Queriesを使って個別にCSSを読み込ませる方法(IE対策済み)

Menu

HOME

 TOP