今回は久しぶりにスタイルシートについての記事です。
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としようかな…。
もし、他にいい方法があるようでしたら、あらためてご紹介します。
