html - line-height 在 中不会显示低于 1em (100%) 的字体大小

Question

我正在使用一个预先存在的主题并具有以下 html:

<blockquote>
  <p>BLOCKQUOTE TEXT</p>

  <footer>
     <cite>CITED AUTHOR</cite>
  </footer>
</blockquote>

对应的css如下:

blockquote {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.8182;
}

blockquote cite {
    font-size: 19px;
    font-size: 1.9rem;
    line-height: 1.6842;
}

该站点确实使用了 css 重置，将 html(根)字体大小保留为 10px。因此 1rem = 10px。计算出的 css 看起来像这样:

blockquote {
    font-size: 22px;
    line-height: 40.0004005432129px;
}

blockquote cite {
    font-size: 19px;
    line-height: 31.9997997283936px;
}

我的问题是，在上面的 css 中替换 cite 的行高值只会反射(reflect)行高的值是否大于当前行高。例如，如果我要写:

blockquote cite {
    font-size: 19px;
    line-height: 1.2;
}

视觉输出看起来仍然好像行高是 1.6842(或 31.9 像素)。更改 blockquote 本身的行高反射(reflect)了它应该没有问题。

我不确定这是否足以确定问题出在哪里，但我似乎无法理解为什么 block 引用内的引用不会反射(reflect)声明的行高，无论我使用什么单位使用。我只是想减少引用的行高。请注意，当前所有主流浏览器都会出现此问题。

Answer 1

尝试为 cite 元素添加 display:inline-block。

blockquote {
    font-size: 22px;
    font-size: 2.2rem;
    line-height: 1.8182;
}

blockquote cite {
    font-size: 19px;
    font-size: 1.9rem;
    line-height: .75;
    background:red;
    display:inline-block;
}

<blockquote>
  <p>BLOCKQUOTE TEXT</p>

  <footer>
     <cite>CITED AUTHOR</cite>
  </footer>
</blockquote>