IE用CSSハックの方法とは？

　サイトをCSSでデザインする時に出てくる問題というのが、ブラウザごとでCSSにズレが起きてしまうということ。特にmargin・padding関係はブラウザごとにサイトを確認してみると位置がズレでいることが結構あります。その中でも特に顕著なのがIE(Internet Explorer)でサイトを表示した時にレイアウトが崩れてしまっていることが多いです。

　そこで今回はIE用、特にIE7～IE11までの各バージョンそれぞれに適応するCSSを設定する方法について紹介したいと思います！
なお、例としてspanタグに対してCSSを設定したいと思います。

IE11用CSS

　まずIE11のCSSを設定するには以下のようにCSSを記述することでIE11のみにCSSを適用させることができます！

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, span {
   color: #ff0000;
   }
}

IE10用CSS

　次にIE10用のCSSは以下のようにCSSを記述することで適用可能になります。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   span {
    color: #ff0000;
   }
}

IE9用CSS

　続いてIE9用のCSSは以下になります！

span:not(:target) {
   color: #ff0000\9;
   }

IE8用CSS

　IE8用CSSは以下のように記述しましょう。

span {
   color: #ff0000\9;
   }

このように「;」の前に「\9」を記述することでIE8用のCSSを適用させることができます。

IE7用CSS

　IE7用のCSSは以下のように記述することで適用可能になります。

span {
   *color: #ff0000;
   }

見本

　それでは上記のIE用CSSを実際に適用させたものが以下になります。

上の見本テキストですが、文字色が
IE11では赤
IE10では青
IE9では黄色
IE8ではグレー
IE7では緑色
に表示されているかと思います。

　このように各IEのバージョンにそれぞれCSSを設定できるというのはとても便利ですので、ぜひ活用してみましょう！