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

Web制作Tips

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>

#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ハックは個人的に最終手段と思っています。
極力使わない方向で考えたいものですね。

コメント

タイトルとURLをコピーしました