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