HTML <sup />标记会影响行高,如何使其一致?


130

如果我<sup>在多行<p>标记中有一个标记,则不管我在上放什么行高,上面带有上标的行的行距都比其他行大<p>

编辑以澄清问题:我并不是说我有很多<p>,每个都在一行上。我有一个<p>内容足够多的包装,导致包装成多行。文字中的某处(任何地方)可能会有<sup><sub>。这会通过在上方/下方添加额外的间距来影响该行的行高。如果我在<p>此设置较大的行高,则对问题没有影响。行高增加了,但是仍然保留了额外的间距。

我如何使其一致-即所有行是否包含相同的间距<sup>

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

Answers:


172

line-height确实可以修复它,但是您可能必须将其设置得相当大:在我的设置中,我必须将line-height增加到大约1.8,然后才能<sup>不再对其造成干扰,但这会因字体而异。

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

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

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

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

当然,如果您没有足够的行高,这就有可能撞到上面的行。


1
垂直对齐固定它,谢谢。即使高度超过300%的行高也无法在IE8,Chrome 3或FF 3.5中修复。我仍然得到1-2px的差异。
洛克

如前所述,如果行高过紧,这并不总是可行。
Ric 2012年

5
@simPod:同样的情况,vertical-align: bottom(尽管不能为您带来多大的收益top),然后给出position:relative;正数top
bobince 2012年

实际上,我更喜欢{vertical-align:super},因为据我所知,它可以防止IE8中的行高显示故障。如果有更好的选择,我将尽量不使用定位。粗心的顶部定位可能会导致项目后期出现级联问题。
所有位等于

88
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>的line-height设置为0。@Scott表示使用normal,但这并不总是有效。

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


2
+1。如上所述,这可以防止与其他line-height属性发生冲突。line-height当然,如果将整体设置为较小,它仍可能与上一条线相交。
克里斯·克里乔

奇妙的解决方案,使铬不再行为不当!最简单的答案。
阿克套

刚刚意识到,这将影响周围文本的非默认行高。line-height: 100%在这种情况下使用。
Matthias Hauert 2014年

这很完美。此外,line-height我发现的可能值为0、1、1em和100%。所有这些当然都可以在Chrome和Firefox中使用。
ClarkeyBoy

对于我的用例,我也更喜欢此答案:此答案适用于Gmail中的电子邮件,而不能接受。stackoverflow.com/questions/21118072/...
Mshnik

7

我遇到了同样的问题,但给出的答案均无效。但是我发现一个git commit带有对我有用的修复程序:

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


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

3
请提供代码说明,以便OP可以从中学习。
EBH

1

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

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

1

<sup>标签影响两行之间的间距的原因与许多因素有关。这些因素包括:行高,上标相对于常规字体的大小,上标的行高以及最后但并非最不重要的是上标的底部与...对齐的高度(如果设置...)常规文本的“隧道带”(即我所说的)为135%,则常规文本(100%)的白色填充为白色的35%。对于段落,它看起来像这样:

 p
    {
            line-height: 135%;
    }

如果您随后不对上标进行白色填充...(即,将其行高保持为0),则上标仅具有其自己的文本的宽度...如果您随后要求上标是常规字体的百分比(对于例如70%),然后将其与常规文本的中间(文本中间)对齐,可以消除问题并得到看起来像上标的上标。这里是:

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

1

我更喜欢这里建议的解决方案,例如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以满足您的要求即可。


0

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

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

或任何具有您想要的效果的值。

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

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

正如我所说,这可能不是一个有吸引力的解决方案。也许可以使用span来完成某些操作,使span上的子/上标变小,除此之外,我不相信可以实现您想要的。但我想看看别人的解决方案。

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中的行高度都相同(我不能说其他浏览器)


1
我在问题中说,这不能解决问题。香港专业教育学院增加了澄清,以防万一您误解了
安德鲁·布洛克

是的,我知道如果我需要为一条线路留出更多的空间,为了保持一致性,我需要为其他线路增加额外的空间,这很明显。我的意思是线高不能解决问题,可以增加空间,但是使用sup 还是有额外的空间
Andrew Bullock

也许浏览器之间是有区别的-毕竟,您接受的答案开始是“ line-height可以解决它”,但是我们不知道bobince使用的是什么浏览器。
pavium

0

我一直在使用line-height:上标是正常的,在Safari,Chrome和Firefox中对我来说效果很好,但是我不确定IE。


0

在通讯上特别使用-

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

0

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

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

0

&sup1,&sup2等可以解决问题。这是HTML的上标技巧


0

这里回答,可以在phantomjs和嵌入电子邮件的HTML中使用:

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.