IE11の時に適用させるmedia query

はじめに

最近Chromeではめちゃくちゃ綺麗に表示されているのに、IEだとうまく表示されていないことが多いです。仕事上、マストで解決しなければならないので、IE11に関する表示崩れの解決策はこれからも欠かさず記事にしていこうと思ってます。

Scss(Sass)のmixinを使う

私はCSSはScssを使って書いているのでScssのコードになります。Sassの場合もさほど変わらないと思いますが、超便利なミックスインです。


@mixin ie {
  @media screen and (-ms-high-contrast: active),
    screen and (-ms-high-contrast: none) {
    @content;
  }
}

今回の事例

ちなみに今回の事例では、疑似要素を使って間隔のある破線を実装したのですが、IE11でうまく機能しませんでした。調べましたが解決できず、仕方ないので、IE11の場合はborderの破線で対応することにしました。


background-image: linear-gradient( to right, #000, #000 3px, transparent 3px, transparent 8px );

mixinの呼び出し方

Scss記法に慣れてる方はご存じかと思いますが一応掲載しておきます。


@include ie {
  border-bottom: 1px dashed #000;
}

これによって、IE以外では疑似要素を用いた間隔を持たせた破線、IEの場合はborder-bottomによる破線になるように表示されていることを確認できました。

ちなみにborder-bottomの破線では破線の間隔が調整できません。少し残念ですがChromeユーザーが大半なので許容範囲ということで解決です。

related article

2020/01/20 Scss / Sass

レスポンシブサイトを印刷すると崩れてしまう

2020/08/06 Scss / Sass

番号付きリストをcssで作る