HTML 标签影响行高，如何保持一致？

Question

如果我有一个 <sup>多行标记 <p>标记，带有上标的行在其上方的行距比其他行大，无论我在 <p> 上放置的行高是多少.

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

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

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

Answer 1

line-height 确实修复了它，但你可能必须让它变得非常大:在我的设置中，我必须在 <sup> 之前将 line-height 增加到大约 1.8不再干扰它，但这会因字体而异。

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

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

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

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

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