基本的HTML/CSS相对字体大小问题

ryevplcw 于 2023-05-19 发布在其他

关注(0)|答案(1)|浏览(192)

请考虑下面的MRE为一个同时上&子脚本块单元。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<style>
#mainwin { display: inline-block; width: 94%; margin: 0 auto 4em auto; padding: 0 0.8em 2em 0.8em; }
#ud { position: relative; display: inline; }
#u { position: absolute; display: inline; font-size: 0.7em; bottom: 1em; }
#d { position: relative; display: inline; 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>

这里的问题是，如果我将此代码托管在像WebView2或CEF这样的 * 嵌入式 * 容器中，字体大小将遵循给定的比例。
MS Edge和Firefox作为浏览器将不遵守字体大小规则，并且代理子和上标跨度将具有与其他所有内容大致相同的字体大小。即使我已经显式地设置了至少一个先前的父容器和body的字体大小，该行为仍然存在。
这是怎么回事？如果我使用px而不是em，它甚至不会注册更改。这使我相信我已经错过了设置沿着组件树的东西。
如果确实出了问题，是什么原因导致嵌入的示例看起来很好？
请告知

css

来源：https://stackoverflow.com/questions/76232561/basic-html-css-relative-font-size-issue

1条答案

按热度按时间

r6l8ljro1#

你有没有尝试在px中的p元素中设置字体大小？在这种情况下，em字体大小将相对于父字体大小

#mainwin {
  display: inline-block;
  width: 94%;
  margin: 0 auto 4em auto;
  padding: 0 0.8em 2em 0.8em;
}

#parent {
  font-size: 16px; /* <---- here! */
  margin-left: 1em;
}

#ud {
  position: relative; display: inline;
}

#u {
  position: absolute;
  display: inline;
  font-size: 0.7em;
  bottom: 1em;
}

#d {
  position: relative;
  display: inline;
  font-size: 0.7em;
  top: 0.6em;
}

<div id="mainwin">
  <p id="parent">integral<span id="ud"><span id="u">44</span><span id="d">5</span></span>
  </p>
</div>

赞(0）回复(0）举报 2023-05-19

我来回答

基本的HTML/CSS相对字体大小问题

1条答案

相关问题

热门标签

最新问答