MS Edgeでfont-family: monospaceのときfont-size指定が期待通りに機能しません

前提

Chromium版Microsoft EdgeでCSSのfont-sizeが期待通りに機能しません。
OSはWindows 10です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <style>
6		#elm {
7			font-family: monospace;
8			font-size: inherit;
9		}
10    </style>
11</head>
12<body>
13	<div id="elm">text</div>
14</body>
15</html>

このようなHTMLがあったとき、#elmのfont-sizeは親要素のbodyのfont-sizeを継承するため、bodyと#elmのfont-sizeは同じになると思います。
実際、Firefoxでは、bodyと#elmの計算済みのfont-sizeはどれも16pxになります。

発生している問題

しかしながら、Chromium版のMS Edgeでは、bodyのfont-sizeは16pxになりますが、#elmのfont-sizeは13pxになり、意図したとおりになりません。

MS Edgeでもbodyと#elmの計算済みfont-sizeを揃えたいです。
ただし、

親要素のfont-sizeを16pxに指定する
#elmのfont-familyを変更する（例えばsans-serifに）
#elmのfont-sizeを16pxに指定する

の3点は無しで揃えたいです。

試したこと

先に挙げた3点の方法を使うと揃えることはできましたが、

px単位での指定をしたくない（inheritやemやremや%などだけを使いたい）
どうしてもfont-family: monospaceを使いたい

という事情がありまして、使えません。

以下のようなCSSを試しましたがうまくいきませんでした。

CSS
1#elm {
2	font-family: monospace;
3	font-size: 1em;
4}

CSS
1#elm {
2	font-family: monospace;
3	font-size: 1rem;
4}

CSS
1#elm {
2	font-family: monospace;
3	font-size: 100%;
4}

CSS
1#elm {
2	font-family: monospace;
3	font-size: medium;
4}

CSS
1body {
2	font-size: 1rem;
3}
4#elm {
5	font-family: monospace;
6	font-size: 100%;
7}

知りたいこと（2つ）

なぜFirefoxでは意図したとおりにfont-sizeが継承されるのに、MS Edgeではそうならないのでしょうか？

エンジンの違いといえばそうなのですが、なんとなくEdgeの挙動が奇妙に感じます。

どのようにすればbodyと#elmのfont-sizeを合わせられるでしょうか？

冒頭のHTMLは説明のために単純化しているのでbodyと#elmのfont-sizeを合わせても大して意味がないような内容になっていますが、自作しているWebアプリのクロスブラウザ対応のために揃えたいです。

teratailを利用するのは初めてなので、おかしな点があればご指摘いただければ幸いです。

Lhankor_Mhy

2021/02/16 08:51

_kari_

2021/02/16 08:56

ご指摘助かります。コードを質問欄に貼って修正して整形して…をやっているときに間違えたみたいです。ありがとうございます。

int32_t

2021/02/16 09:13

Chromiumのバグで、https://bugs.chromium.org/p/chromium/issues/detail?id=833697 に☆を付けると直される可能性が高まるかもしれません。

_kari_

2021/02/16 09:23

仕様じゃなくてバグの扱いなんですね… normalize.cssではここらへんもきちんと対応されているみたいです。おとなしく使っておけばよかった…

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

回答1件

ベストアンサー

こんばんは。

ググったところ、以下のような記事がありました。

等幅フォントも可変幅フォントと同じサイズで表示したい時は次のように指定します。

font-family: monospace, serif;
font-family: monospace;だと文字が小さくなる - しらいとブログ

投稿2021/02/16 08:55

Lhankor_Mhy

総合スコア36932

_kari_

2021/02/16 09:13

おおお！まさにこれだと思います。「edge font-size inherit」とかのキーワードで自分なりに検索はしていたのですが、この情報は見つけられていませんでした。調べると、不思議なことにfont-family: monospace, monospace;と二回書いても同じ効果が得られるようです。 https://stackoverflow.com/questions/38781089/font-family-monospace-monospace なんでなのかはさっぱりですが… とりあえず今回はfont-family: monospace, serif;と指定して対処します。ご回答ありがとうございました。こんなに早く解決するとは思っていませんでした。