2020.3.9

IEの「width」にcalc()で割り切れない値を設定する際の注意点

あるページをIEブラウザで開いた時だけデザインが崩れてしまっていたことがあり、調べるとwidthのcalc()に割り切れない値 calc(100% / 3) といったような設定をしていることが原因だったので、対処方法についてメモしておきます。

なお、IE9以前は対応しない前提とします。

目次

  • 問題のあったコード
  • 対策 その1 calc()を使わない
  • 対策 その2 「*::-ms-backdrop」を指定する
  • 対策 その3 「_:-ms-lang(x)::-ms-backdrop」を指定する
  • 対策 その4 メディアクエリで「-ms-high-contrast: none;」を指定する
  • 最後に
  • 参考リンク

問題のあったコード

問題があったのは、折り返し可能なエリアに複数列を表示しているページで、各要素の幅に対して、以下のような設定をしている場合です。


.sample-item {
  width: calc(100% / 3);
}

大抵のブラウザでは問題なく動作しますが、IEの場合のみ、小数点の扱いが異なるのか、ウィンドウの幅によっては3列ではなく、2列で表示されてしまうことがあります。

AAA
BBB
CCC
DDD
EEE

(※ IEブラウザで開いてウィンドウの幅を縮小・拡大して確認してください)

この現象は、割る値が3や6などの100を割り切れない時に起きました。

対策方法としてはいくつかあるようで、以下に示します。

対策 その1 calc()を使わない

まず最初の対策として、一番簡単なのはcalc()を使わないことです。


.sample-item {
  width: 33.33%;
}

指定する際は 33% だと 1% 余ってデザインが微妙になってしまうので、小数点も含めます。

AAA
BBB
CCC
DDD
EEE

対策 その2 「*::-ms-backdrop」を指定する

CSSでブラウザを判定するのに「*::-ms-backdrop」を使う方法があります。


.sample-item{
  width: calc(100% / 3);
}
*::-ms-backdrop, .sample-item{
  width: 33.33%;
}

こちらはIE11のみの対応。

AAA
BBB
CCC
DDD
EEE

対策 その3 「_:-ms-lang(x)::-ms-backdrop」を指定する

もう一つ、CSSでブラウザを判定するのに「_:-ms-lang(x)::-ms-backdrop」を使う方法があります。


.sample-item{
  width: calc(100% / 3);
}
_:-ms-lang(x)::-ms-backdrop, .sample-item{
  width: 33.33%;
}

こちらもIE11のみ対応。

AAA
BBB
CCC
DDD
EEE

対策 その4 メディアクエリで「-ms-high-contrast: none;」を指定する

メディアクエリでハイコントラストモードを指定する方法もありました。


.sample-item{
  width: calc(100% / 3);
}
@media (-ms-high-contrast: none){
  .sample-item{
    width: 33.33%;
  }
}

こちらはIE11以外にIE10にも対応していますが、一つ問題があって、ハイコントラストモードがON(active)になっていると、効かなくなるという欠点があります。

AAA
BBB
CCC
DDD
EEE

「なにそのモード?」という感じだったので確認すると、Windowsでは「設定 > 簡単操作 > ハイ コントラスト」からON/OFFを切り替えられるようです。

今までこのモードを使っている人を一人も見たことがないので気にしなくていいのかとも思いますが、そこはそれぞれのプロジェクトの判断によると思います。

最後に

個人的にはIE11に対応していればよかったので、「_:-ms-lang(x)::-ms-backdrop」を使う方法で対応しました。

IE対応は本当にバグの温床になりますね。

参考リンク

CSS】関連記事