Published 8月 22nd, 2012 by

IE対策 – IEと仲良く付き合う方法 -

webサイトを作る上で、場合によって、悩みのタネとなってくれるIEさん。

僕自身も、時々悩まされます。

クリエイターさんの多くは同じような気持じゃないでしょうか？？

IEは憎い・・・　ですが、だからといって嫌がっても仕方がないです！
それならばいっそIEと仲良く付き合っていきましょう！

そんなくだりですが、
IE対策について、日頃よくやっていることをまとめてみました。

まずは、

IEのみにCSSファイルやJSファイルを読み込ませる方法

すべてのバージョンのIE

<!--[if IE]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IEには対応させない

<!--[if !IE]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7のみ対応

<!--[if IE 7]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6のみ対応

<!--[if IE 6]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6以下に対応

<!--[if lt IE 7]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

※IE7は含まずIE6以下です！ IE7という文字に惑わされないように・・・

IE7以下に対応

<!--[if lt IE 8]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE8以下に対応

<!--[if lt IE 9]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE6以上に対応

<!--[if gt IE 5.5]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE7以上に対応

<!--[if gt IE 6]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

IE8以上に対応

<!--[if gt IE 7]>
	<link href="fix.css" rel="stylesheet" type="text/css" />
<![endif]-->

これでjs,cssのバージョン別読み込みは大丈夫ですね！

これだと、
「一箇所のcssだけを対応させるのにいちいち別ファイルを読み込ませのは面倒くさい・・・」
という意見が出てくると思いますので、個々のcssのIE対策を記述します。

だぶってるのもありますが、お好きなのをご使用下さい！

/* IE6のみに適用 */
* html .hoge { }

/* IE7のみに適用 */
*+html .hoge { }

body {
color: red; /* 通常 */
color : green¥9; /* IE8 以下 */
*color : yellow; /* IE7 以下 */
_color : orange; /* IE6 */
}

・IE8とそれ以下用の指定
最後に「¥9」をつける。

・IE7とそれ以下用の指定
先頭に「*」をつける。

・IE6用の指定
先頭に「_」をつける。

といった感じです！

バグとかの解決