calc()で算出したフォントサイズがEdgeでおかしなことに…

検証用でHTMLにベタ書きですが、以下のように。

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>無題ドキュメント</title>
6<style>
7html {
8	color:#000;
9	line-height:150%;
10	font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
11	font-size:calc(87.5% + 0.25vw);
12}
13
14p {
15	display:inline-block;
16	background-color:#f60;
17	padding:20px;
18	color:#fff;
19	font-size:2em;
20	font-weight:bold;
21	border-radius:8px;
22}
23</style>
24</head>
25
26<body>
27<p>この文字がすごいことに</p>
28</body>
29</html>

をMS Edgeで見ると、

上のようになり、Firefox/Chrome/Operaで見ると、下のようになります。
フォントサイズは、87.5%で14px相当を基本に、0.25vwで2px相当足して、
16pxがベースフォントサイズになるようにしていて、
この文字部分は2emにしてあるので、おおよそ32px相当になってくれれば、
意図したサイズなので、下の方が正解となるのですが…
Edgeだと、0.25vwの部分だけ反映されているようで、
その証拠に、ブラウザサイズを変更すると、上の画像より、小さくなって
くれるんですね(画像はいずれもフルスクリーンでキャプチャ)。

ちなみに、Windows10にしてから、IETesterでIE9以降のテストが
出来なくなっているので、未確認…

コリスさんの紹介記事
calcはIE9以降で対応しているはずなので、上記サイトと同じことを
やっているのですが、計算式がだめなのでしょうか？それとも、Edgeのバグ？
可能な方であれば、IE9-11でどうなっているか、教えていただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

IE9-11でもMS Edgeと同じ表示でした。
この問題については、IE（MS Edge）のバグだと思います。

以下のような対応はいかがでしょうか。

＜代替案＞

html
1html {
2    color:#000;
3    line-height:150%;
4    font-family:"游明朝",YuMincho,"ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","HG明朝E","ＭＳ Ｐ明朝","ＭＳ 明朝",serif;
5    font-size:62.5%;
6}
7
8body {
9    font-size:calc(1.4em + 0.25vw); /* =14px + 0.25vw*/
10}

ちなみに
0.25vw = 2px なのは、viewport（表示領域）が800pxのときのみです。

Windows10にしてから、IETesterでIE9以降のテストが出来なくなっているので、未確認…
⇒ https://121ware.com/qasearch/1007/app/servlet/relatedqa?QID=017902
こちらで確認できないでしょうか？

投稿2016/10/13 02:18

takumaro_web

総合スコア301

LibertyBell3

2016/10/13 05:01

ご回答、ありがとうございます。提案の通りで、意図したサイズになりますね。 IE9-11/Edge では、calc(% + vw)の形式では正常な計算が出来ないってことなんでしょうね。(vhもかな？) 2px相当なのは…は、先の紹介ページにもあるので、承知しておりました。省いてしまいすみません。それより、お恥ずかしいのが、Windows10にIE11が入っていたことに気づいていなかったこと(笑)。穴があったら入りたい…

takumaro_web

2016/10/13 05:10

>IE9-11/Edge では、calc(% + vw)の形式では正常な計算が出来ないってことなんでしょうね。(vhもかな？) おそらくそうだと思います。海外でも結構困ってる方が多いみたいでした。＜参考までに＞ https://www.sitepoint.com/community/t/font-size-calc-100-0-3vw-not-working-in-ie/218960 https://css-tricks.com/forums/topic/calc-not-always-working-in-ie/ http://stackoverflow.com/questions/25241762/calc-not-working-ie-11 >Windows10にIE11が入っていたことに気づいていなかったこと(笑)。意外に知らない方も多いかもしれないです！

LibertyBell3

2016/10/13 05:56

一番上のサイトはたどり着いていましたが、英語が…(笑) って、cootheadさんという方が、正解を書いていますね!! 読解力の無さに、また恥ずかしくなりました(笑)。とにかく、非常に助かりました。ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する