IEのみにスタイルを適用するCSSハック

MARKLEAPS

2022.07.20

IEのみにcssを適用する方法についてまとめました。

_:-ms-input-placeholder, :root セレクタ {
	/* IE11、IE10のみに適用したいスタイル */
}

_:-ms-input-placeholder, :root セレクタ {

/* IE11、IE10のみに適用したいスタイル */

}

どのような仕組みでIEにのみスタイルが適用されるのか考察されている以下のサイトが参考になりました。
【参考】IEハック

サポートが終了したIE10は切り捨ててIE11のみに適用する場合は以下

_:-ms-lang(x)::-ms-backdrop, セレクタ {
	/* IE11のみに適用したいスタイル */
}

_:-ms-lang(x)::-ms-backdrop, セレクタ {

/* IE11のみに適用したいスタイル */

}

IE css ハックで検索すると以下の記述方法が多数出てきます。

@media (-ms-high-contrast: none) {
  /* IE11、IE10のみに適用したいスタイル */
}

@media (-ms-high-contrast: none) {

/* IE11、IE10のみに適用したいスタイル */

}

これだと、ハイコントラストモードがnoneの時にはスタイルが適用されますが、
ハイコントラストモードがactiveの時にはIEでもスタイルが適用されません。

ではこうすればいい？

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    セレクタ {
        /* 適用させたいスタイル */
    }
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {

セレクタ {

/* 適用させたいスタイル */

}

今度はハイコントラストモードがオンの場合にEdgeにもスタイルが適用されてしまいます。

CSS

よく読まれている関連記事