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

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

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

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

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

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

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

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

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

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

.sample-item {
  width: 33.33%;
}

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

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

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

こちらはIE11のみの対応。

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

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

こちらもIE11のみ対応。

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

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

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

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

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

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

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

• ブラウザやOSごとにCSSを適応させるCSSハックいろいろ | Free Style