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（root）字体大小保留为10px。因此1rem = 10px。计算出的css看起来像这样：

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

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

我的问题是，在上面的css中替换cite的line-height值只会反映line-height的值大于当前的line-height。例如，如果我要写：

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

视觉输出看起来仍然像行高是1.6842（或31.9px）。更改blockquote中的行高本身应该没有任何问题。

我不确定这是否足以确定问题所在的位置，但我似乎无法理解为什么一个块引用内的引用不会反映所声明的行高，无论如何我用的是什么单位我只想减少引用的行高。请注意，所有当前主流浏览器都会出现此问题。

Answer 1

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

＆＃13;

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;
}

＆＃13;

<blockquote>
  <p>BLOCKQUOTE TEXT</p>

  <footer>
     <cite>CITED AUTHOR</cite>
  </footer>
</blockquote>

＆＃13;

<cite>行高不会在<blockqoute> </blockqoute> </cite>中显示低于1em（100％）的font-size

1 个答案: