「Internet Exploer」タグアーカイブ

IE6,7,8,9だけCSSで違う記述を反映させる方法

IEなんてなくなればいいのに…とは言うものの

CSSに以下の記述をすることで、適応させることがが可能になる。

これを通称ハックと呼ぶらしい。まあ言葉なんかどうでもいい。

 

IE6だけに適応

先頭に「_」をつけることでIE6だけに適用。

.sample {
_display: none;
}

 

IE7だけに適応

先頭に「*」をつけることでIE7だけに適用。

.sample {
*display: none;
}

 

IE8だけに適応

末尾に「\9」をつけることでIE8だけに適用。なんで9やのにIE8やねん…

.sample {
display: none\9;
}

 

IE9だけに適応

親要素として「:root」をつけて、
末尾に「\0/」をつけることでIE9だけに適用。

:root .sample {
display: none\0/;
}

 

使用例

例えば、IE6, 7だけで非表示にしたい場合。

.ie67none {
_display: none;
*display: none;
}

こんな感じで、IE6とIE7で非表示にするclassを作って、

<p class=”ie67none”>IE6とIE7ではこの文字は非表示</p>

としてやればいい。