浏览器未呈现 CSS 字体大小

Question

我有一个从数据库动态创建网站的 php 脚本。为了更好的可读性，我想使用两种不同的字体大小，名称较大，日期较小。我读了很多，最后在输出中添加了“span id”。

#Klein {
  font-size: 1em;
}

<div class='Liste'><a class='linkz3' href='index_dev.php?gekauft=49'>TK-Pommes <span id="Klein"> 2020-12-22</span></a>

当我在 Firefox 检查器中查看页面时，CSS 中的小字体被浏览器识别为 span 标签内的日期字符串，但字体大小没有区别see attached screenshot

既然 Firefox Linux、Firefox Android 和 Chrome Android 的行为都是一样的，那我一定是搞错了。但是哪个？

Answer 1

您面临的问题是1em 是父元素的大小。简而言之，使用em 而不是px 的优势在于em 可以在px 没有的地方缩放。

因此，要使其更小，您应该尝试以下操作：

#Klein
{
    font-size: 0.5em;
}

<div class='Liste'>
  <a class='linkz3' href='index_dev.php?gekauft=49'>
    TK-Pommes&nbsp;
    <span id="Klein"> 2020-12-22</span>
  </a>
</div>

Answer 2

我认为您不太了解em，您将其用作字体大小的单位。 Em 与 % 和 1em = 100% 类似，即，它将设置其字体大小等于其父元素的字体大小，即此处的 Username。