読者です 読者をやめる 読者になる 読者になる

IE(Edge含む!!)でcalc(% + vw)の計算はダメ、ゼッタイ!!

手短に行きます。

フォントサイズを%(パーセント)とvwで指定するとこうなります。

Chrome → OK
Firefox → OK
Safari → OK
IE11 → ×(なーんだ、いつものことか)
Edge → ×(ファッ!!!?)

なんと、IEだけならず、Edgeでもダメなんですね。 具体的には

font-size: calc(200% * 2vm);

みたいにフォントサイズを指定していると、IE,Edgeでは小さく表示されてしまっていました。

どうすればいいの?

teratailに答えがありました。

teratail.com

なんでも、IE9-11/Edgeでは、%とvwでは正確な計算ができないそうな。

紹介されているように、以下のようにしたら直りました。

font-size: calc(200% * 2vm);
     ↓
font-size: calc(2em * 2vm);

ほんとに勘弁して欲しいです。。。

同じようにハマっている人がいたらやってみてください。