（恐らく）最も簡単な、対IE用CSSハック術 | ITキヲスク

CSSコーディングにおいて最も邪悪かつ驚異的な存在、Internet Explorer。

どんなに完璧にCSSを理解していても、彼らの挙動を把握していない限り、まさに「机上の空論」となってしまうという、恐るべき魔物。

それに立ち向かうべく発明されたのが、各ブラウザの独自仕様やバグの穴を利用して各ブラウザ個別に対応するという、いわゆる「CSSハック」。

今回はワタクシsmknが対IE用として日常的に使用している、（恐らく）最も簡単であろうCSSハック術をご紹介します。

と、その前に…。

今回ご紹介するCSSハック術は､CSSの正式な文法としては間違っています。

バリデート通りません。invalidです。

本来なら文法的にも正しいハックを使った方が良いのかもしれませんが、そもそもハックしちゃってる時点で正しいもクソもないような気が、個人的にはしてるので。

さらに、ハックの所為でCSSがバリデート通らなかったからといって、そこまで大きな問題でも無いかと。動かない・表示されない、とかじゃないんだし。

ここら辺は個人の考え方や仕様・条件などにもよるので、一概に「コレが絶対だぉ☆」とは言いません。手早く簡単に思い通りに、って言う場合なんかには適してるよー、ってコトで。

では、長くなりましたが、以下が対IE用の簡単CSSハックです。

（恐らく）最も簡単な、対IE用CSSハック術

1.IE6にだけ適用させる場合

まずサンプルとして、下記のようなhtmlソースがあるとします。

<p id="aaa">
	豚肉食っても新型インフルには感染しないんだよ！
</p>

このid=”aaa”の中の文字「豚肉食っても新型インフルには感染しないんだよ！」を、フツーのブラウザでは「赤色」で、IE6だけ「青色」にするには、下記のように指定します。。

p#aaa {
	color:#ff0000;
	_color:#0000ff;
}

colorプロパティの前にアンダーバー「_」があります。コレがキモです。

フツーのブラウザでは、プロパティの前にアンダーバーがあると「コレ間違ってるやん！」といって読み込んでくれません。

が、IE6だけは、「ん？何かあったんか？ワシにゃ見えんわい。」と、間違いを気にせず読み込んでしまいます。

なので、IE6にだけ適用したい場合、そのプロパティの前にアンダーバー「_」を記述すれば、IE6にだけ適用されます。
注）アンダーバー「_」から始まる指定は、IE用に「上書き」しているカタチですので、書く際はプロパティの順序に注意してください。IEハックが最後に来ればＯＫ。

下記、実例。該当IEとその他ブラウザで、下記の見え方が違いますよ。

豚肉食っても新型インフルには感染しないんだよ！

2.IE6とIE7にだけ適用させる場合

続いても下記サンプル。文言はあまり気にしないのが吉。

<p id="bbb">
	美少女仮面ポワトリンを知ってる世代。
</p>

このid=”bbb”の中の文字「美少女仮面ポワトリンを知ってる世代。」の文字サイズを、フツーのブラウザでは「9pt」で、IE6とIE7だけには「15pt」とするには、下記のように指定します。。

p#bbb {
	font-size:8pt;
	*font-size;15pt;
}

先ほどの「IE6用ハック」と似てますね。今度はfont-sizeプロパティの前に、アスタリスク「*」があります。

この記号を記述する事で、IE6とIE7だけしか読み込めないプロパティになるのです。

では下記、実例です。

美少女仮面ポワトリンを知ってる世代。

3.IE7にだけ適用させる場合

これはもう単純に、前述の２つのハックの合わせ技です。

<p id="ccc">
	青そばテルマ／山にいるよ
</p>

このid=”ccc”の背景色を、フツーのブラウザとIE6では「赤色」で、IE7だけ「青色」とするには、下記のように指定します。。

p#ccc {
	background-color:#FF0000;
	*background-color:#0000FF;
	_background-color:#FF0000;
}

全ブラウザ指定 – IE6とIE7への指定 + IE6への指定（内容は全ブラウザ指定と一緒）= IE7 って感じです。

んでは、以下に実例を。

青そばテルマ／山にいるよ