HTML/CSS相对字体大小问题：上下标在浏览器与嵌入式容器表现差异

• 核心问题出在绝对定位元素的字体大小计算逻辑：#u是绝对定位，其父元素#ud设置为display: inline。现代浏览器（Edge、Firefox）中，inline元素的包含块计算规则会导致绝对定位子元素的font-size: 0.7em无法基于正文字体大小正确缩放，反而可能继承更高层级元素的字体设置，最终导致上下标和正文大小几乎一致。
• WebView2/CEF等嵌入式容器的渲染引擎版本或默认样式集合与桌面浏览器存在差异，可能未严格遵循现代浏览器的inline包含块计算规则，或是默认样式对inline定位元素的处理更宽松，因此显示符合预期。

以下方案按推荐优先级排序：

方案1：使用原生上下标标签（最简洁可靠） #

直接利用HTML原生的<sup>（上标）和<sub>（下标）标签，浏览器会默认处理字体大小与位置，无需自定义复杂定位逻辑：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#mainwin { display: inline-block; width: 94%; margin: 0 auto 4em auto; padding: 0 0.8em 2em 0.8em; }
/* 可根据需求微调上下标的字体大小和位置 */
sup, sub { font-size: 0.7em; }
</style>
<body>
<div id="mainwin">
<p style="margin-left:1em;">integral<sup>44</sup><sub>5</sub></p>
</div>
</body>
</html>

方案2：修改父元素的display属性 #

将#ud的display从inline改为inline-block，为绝对定位子元素提供明确的块级包含块，确保字体大小基于父元素正确计算：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
#mainwin { display: inline-block; width: 94%; margin: 0 auto 4em auto; padding: 0 0.8em 2em 0.8em; }
#ud { position: relative; display: inline-block; /* 修改为inline-block */ vertical-align: middle; /* 对齐正文基线 */ }
#u { position: absolute; font-size: 0.7em; bottom: 1em; left: 0; }
#d { position: relative; font-size: 0.7em; top: 0.6em; }
</style>
<body>
<div id="mainwin">
<p style="margin-left:1em;">integral<span id="ud"><span id="u">44</span><span id="d">5</span></span></p>
</div>
</body>
</html>

方案3：明确设置父元素字体大小 #

给#ud设置明确的字体大小（比如继承正文的字体大小），确保子元素的em单位基于该值计算：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body, p { font-size: 16px; /* 明确正文字体大小 */ }
#mainwin { display: inline-block; width: 94%; margin: 0 auto 4em auto; padding: 0 0.8em 2em 0.8em; }
#ud { position: relative; display: inline; font-size: inherit; /* 继承正文字体大小 */ }
#u { position: absolute; font-size: 0.7em; bottom: 1em; }
#d { position: relative; font-size: 0.7em; top: 0.6em; }
</style>
<body>
<div id="mainwin">
<p style="margin-left:1em;">integral<span id="ud"><span id="u">44</span><span id="d">5</span></span></p>
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者mindoverflow