IE11のCSSで「calc」が効かない場合の対処方法

0

厳密に言うと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つを併用すれば、一通りのブラウザは対応できるはずです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA