Question

如果我在多行标记中有标记，则带有上标的行在其上方的行间距大于其他行，无论行高是多少我戴上。

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

如何使其保持一致 - 即所有行是否具有相同的间距，无论它们是否包含？

您的解决方案必须是跨浏览器（IE 6 +，FF，safari，opera，chrome）

Answer 1

行高确实修复了它，但你可能要把它做得很大：在我的设置中，我必须在不再干扰它之前将行高增加到1.8左右，但这会有所不同从字体到字体。

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

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

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

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

当然，如果没有足够的行高，这会冒着崩溃的风险。

Answer 2

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

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

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

Answer 3

我遇到了同样的问题而且没有给定的答案。但是我发现git commit有一个修复程序对我有用：

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

Answer 4

保持简单：

sup { vertical-align: text-top; }

[ font-size 取决于您的个人类型面]

Answer 5

我更喜欢在vertical-align上使用length。这使得元素的基线在给定长度上与其父母的基线相对齐。

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

Answer 6

标签影响两条线之间间距的原因与许多因素有关。因素是：行高，与常规字体相关的上标大小，上标的行高，最后但并非最不重要的是上标的底部与...对齐如果你将常规文本的行高设置为135％的“隧道带”（我称之为隧道带），那么常规文本（100％）将白色填充35％的白色。对于段落，这看起来像这样：

 p
    {
            line-height: 135%;
    }

如果你没有白垫上标...（即保持其行高为0）上标只有自己文本的宽度...如果你然后要求上标是常规的百分比字体（例如70％）并将它与常规文本（文本中间）的中间对齐，您可以消除问题并获得看起来像上标的上标。这是：

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

Answer 7

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

Answer 8

我更喜欢建议的here解决方案，例如this jsfiddle：

CSS：

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.2em;
}

sub {
  top: 0.2em;
}

HTML：

<span>The following equation is perhaps the most well known of all: </span><span id="box">E<sub>a</sub> = mc<sup>2</sup></span><span>.  And it gives an opportunity to try out a superscript and even throw in a superfluous subscript!  I'm sure that Einstein would be pleased.</span>.

此解决方案的优点在于，您可以调整上标和下标的垂直位置，以避免与上方或下方的线发生任何冲突...在上方，只需将0.2em增大或减小为满足您的要求。

Answer 9

要使所有行更高，看起来与带有上标的行相同，请为整个段落定义更大的line-height

<p style='line-height:150%'>

或任何值可以产生你想要的效果。

看起来很奇怪，但这就是你描述你的要求的方式。

编辑：为了使所有行看起来都相同当只有一个需要比其他行更多的垂直空间时，段落中的所有行都必须更高。

正如我所说，这可能不是一个有吸引力的解决方案。也许有些东西可以通过一个跨度来制作带有sub / superscript 较小的文本，除此之外我不相信你想要的东西可以实现。但我希望看到别人的解决方案。

EDIT2：顺便说一下，我试过一个包含

的小html文件

<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

FF3.0.14和Konqueror中的线条高度相同（我不能代替其他浏览器）

Answer 10

我一直在使用line-height：上标正常，在Safari，Chrome和Firefox中对我来说很好，但我不确定IE。

Answer 11

特别在时事通讯上使用它 -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

Answer 12

我喜欢Milingu Kilu的解决方案，但本着同样的精神，我更喜欢

sup { vertical-align:top; line-height:100%; }

Answer 13

＆amp; sup1，＆amp; sup2等可能会成功。这是上标的HTML技巧

Answer 14

来自here的答案同时适用于phantomjs和嵌入电子邮件的HTML：

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

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

14 个答案: