IEでcalcを使用して崩れる場合の対処法

CSSのcalc()関数を使用すれば計算式を書くだけで値を指定できるので便利ですがIEで使用する場合は注意が必要です。

例えば要素の幅を三等分したい場合に以下のように指定することができますがIEではカラム落ちしてしまいます。

li {
  width: calc(100% / 3);
}

原因

原因は割り切れない数字にあります。

calc(100% / 3);の値は33.333…%となりますが、IEでは割り切れない場合に小数点が切り上げられるため100%を超えてしまいカラム落ちが起こります。

対処法

以下のようにIEだけで効く記述を追記します。

li {
  width: calc(100% / 3);
}

/* IE */
_:-ms-lang(x)::-ms-backdrop, li {
  width: 33.33%;
}

おしまい。