IE11のCSSで「calc」が効かない場合の対処方法
厳密に言うとIE11でもcalcは使えるので、つまり効いてはいるのです。
このパターンは最もよく使うものの1つです。
.sample {
width: calc(100%/3);
}
例えばこれが横並びにしたいものだとすると、IE以外のブラウザだと綺麗に3等分に横並びになるのですがIE11の場合は段落ちしてしまいます。
これを回避するにはやはり従来の33.3%とする方法をとります。(他にも良いやり方はあるのでしょうか?)
33.3%とするのはIE11に対してだけですので、IE11専用のハックを用います。
*::-ms-backdrop, .sample {
width: 33.33%; /* IE11 */
}
これの2つを併用すれば、一通りのブラウザは対応できるはずです。
