html - HTML^{标签影响行高，如何使其保持一致？}

Question

如果我在多行标签中有一个标签，则带有上标的行上方的行距大于其他行，无论我在.

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

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

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

score 190 · Accepted Answer

line-height 确实可以解决它，但是您可能必须使它变得很大：在我的设置中，我必须将 line-height 增加到大约 1.8 才不再干扰它，但这会因字体而异。

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

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

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

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

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

score 109 · Accepted Answer

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

诀窍是将' 的 line-height 设置为 0。@Scott 说要使用正常，但这并不总是有效。

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

score 8 · Accepted Answer

我遇到了同样的问题，并且没有给出的答案有效。但我找到了一个git commit，其中有一个对我有用的修复程序：

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

score 3 · Accepted Answer

3

保持轻松：

sup { vertical-align: text-top; }

[字体大小取决于您的个人字体]

于 2013-04-15T09:04:07.263 回答

score 3 · Accepted Answer

我更喜欢这里建议的解决方案，例如这个 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根据您的要求增加或减少。

score 2 · Accepted Answer

标签影响两行间距的原因与许多因素有关。这些因素是：行高，上标相对于常规字体的大小，上标的行高，最后但并非最不重要的一点是上标的底部与...对齐如果您设置...行高常规文本在 135% 的“隧道带”（这就是我所说的）中，然后常规文本（100%）被白色填充 35% 的白色。对于一个段落，它看起来像这样：

 p
    {
            line-height: 135%;
    }

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

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

我更喜欢length在垂直对齐上使用。这将元素的基线在其父基线上方的给定长度对齐。

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

score 1 · Accepted Answer

我只需要更改页面的一个部分中的默认 行为，因此我在那里应用了一个类。对我来说也是垂直对齐：顶部工作得很好，增加了大约 4 个像素。

sup.my-class {
    vertical-align: top;
    position: relative;
    top: -4px;
}

score 0 · Accepted Answer

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

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

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

它可能看起来很奇怪，但这就是您描述您的要求的方式。

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

正如我所说，这可能不是一个有吸引力的解决方案。也许可以通过跨度来完成一些事情，使带有 sub/superscript 的文本更小，除此之外，我不相信你想要的可以实现。但我想看看别人的解决方案。

EDIT2：顺便说一句，我尝试了一个包含

<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 中的线条高度相同（我不能代表其他浏览器）

score 0 · Accepted Answer

我一直在使用 line-height: normal 作为上标，它在 Safari、Chrome 和 Firefox 中对我来说很好，但我不确定 IE。

score 0 · Accepted Answer

0

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

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

于 2013-01-21T11:25:01.813 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

¹, ² 等可能会奏效。这是上标的 HTML 技巧

于 2017-07-21T22:57:23.660 回答

score 0 · Accepted Answer

从这里回答，适用于 phantomjs 和电子邮件嵌入的 HTML：

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

html - HTML标签影响行高，如何使其保持一致？

15 回答 15

Related

Reference

html - HTML^{标签影响行高，如何使其保持一致？}