HTML <sup /> 标签影响行高，如何保持一致？

Question

如果我在多行标签中有一个 <sup> 标签 <p> 标签，上面带有上标的行比其他行有更大的行距，不管是什么行-我放在 <p> 上的高度。

编辑澄清：我并不是说我有很多 <p> s，每个都在一行上。我有一个 <p> 有足够的内容导致换行到多行。文本中某处（任何地方）可能有 <sup> 或 <sub> 。这会通过在上方/下方添加额外间距来影响该行的行高。如果我在 <p> 上设置更大的行高，这对问题没有影响。行高增加了，但额外的间距仍然存在。

我怎样才能使它一致 - 即所有行都具有相同的间距，无论它们是否包含 <sup> ？

您的解决方案必须是跨浏览器的（IE 6+、Firefox、Safari、Opera、Chrome）

原文由 Andrew Bullock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

line-height 确实修复了它，但你可能必须让它变得非常大：在我的设置中，我必须在 <sup> 不再干扰它，但这会有所不同字体到字体。

获得一致行高的一种可能方法是设置您自己的上标样式而不是默认的 vertical-align: super 。如果您使用 top 它不会向行框添加任何内容，但您可能需要进一步减小字体大小以使其适合：

 sup { vertical-align: top; font-size: 0.6em; }

您可以尝试的另一个技巧是使用定位将其向上移动一点而不影响行框：

 sup { vertical-align: top; position: relative; top: -0.5em; }

当然，如果你没有足够的行高，这会有撞到上面一行的风险。

原文由 bobince 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

诀窍是将 <sup> 的行高设置为 0。@Scott 说使用正常，但这并不总是有效。

这意味着您 不必更改 周围文本的行高来适应上标文本。我已经在 IE7+ 和其他主要浏览器中对此进行了测试。

原文由 Ric 发布，翻译遵循 CC BY-SA 4.0 许可协议