【CSS】IEでのみ適用されるスタイルを指定する方法

村上 著者:村上

【CSS】IEでのみ適用されるスタイルを指定する方法

今回は久しぶりにスタイルシートについての記事です。
Chromeとかでは問題ないのに、IEで閲覧した時だけ、ここのアイコンの位置がずれる…ってことあるかと思います。
そういったときに、IEでのみ余白のサイズを○pxにするなど、ブラウザを指定してスタイルを適用する方法です。

参考にさせていただいた記事はこちら。

IE11にのみ適用するスタイルシート – Qiita
https://qiita.com/eturlt/items/d43b1e19d7878ed41456

 

記述方法は、下記のとおりです。

image {
    width : 300px;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    image {
        width : 250px;
    }
}

上記のようにメディアタイプを指定し、閲覧に使われているブラウザが IE だと判断したら、その中で記述した CSS を適用するという方法です。
こちらを使うと、例えば上記のコードでは、Chrome などで閲覧したときは画像の横幅は 300px で表示されますが、IE で閲覧したときのみ、画像の横幅は 250px で表示されます。
こちらを指定したところ、狙い通りに IE でのみ特定のスタイルを指定することができました。

が、こちらの方法、実はあまり推奨されていない方法なのだとか。
そのことについてまとめてあるサイトはこちら。

-ms-high-contrast を CSS ハックに使ってはいけない、ただひとつの理由 / JeffreyFrancesco.org
https://jeffreyfrancesco.org/weblog/2017042601/

また、こちらの方法では、依然として Microsoft Edge でデザインが崩れたままでした。

 

やはり IE、Edge は癖があって苦手です…!
が、とりあえずは IE では意図したとおりのデザインで表示させることができたので、一旦これでOKとしようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。

  • この記事いいね! (0)

著者について

村上

村上 administrator