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

如果我在一个多行<p>标签中有一个<sup>标签,那么带有上标的行比其他行具有更大的行间距,而不pipe我放在<p>

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

我怎样才能使它保持一致 – 也就是说,不pipe它们是否包含<sup>所有行都有相同的间距?

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

行高确实解决了这个问题,但是你可能需要把它做的很大:在我的设置中,我必须在<sup>之前将行高增加到1.8左右,而不再干扰它,但是这会因字体的不同而有所不同。

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

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

你可以尝试的另一个黑客是使用定位来移动它,而不会影响线框:

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

当然,如果你没有足够的行高,这会冒着碰到上面这条线的风险。

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

诀窍是将<sup>的行高设置为0. @Scott表示使用正常,但这并不总是工作。

这意味着您不必更改周围文本的行高来容纳上标文本。 我已经在IE7 +和其他主stream浏览器中testing过了。

我有同样的问题,而不是给出的答案工作。 但是我发现一个git提交了一个修复程序, 它对我很有用:

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

保持容易:

 sup { vertical-align: text-top; } 

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

我更喜欢使用垂直alignment的length 。 这将元素的基线与父元素基线之上的给定长度alignment。

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

为什么<sup>标签影响两行之间的间距的原因与许多因素有关。 这些因素是:行高,上标与正常字体的大小,上标的行高以及最后但并非最不重要的是上标的底部alignment…如果设置…行高的正常文本在135%的“隧道带”(这就是我所说的),那么正规文本(100%)得到的白色填充白色的35%更多。 对于一个段落,这看起来像这样:

  p { line-height: 135%; } 

如果你不上白色的上标…(即保持其行高为0),上标只有它自己的文本的宽度…如果你然后要求上标是常规字体的百分比(for例如70%),并将其与常规文本(文本 – 中间)的中间alignment,可以消除问题并获得看起来像上标的上标。 这里是:

 sup { font-size: 70%; vertical-align: text-middle; line-height: 0; } 
 sup, sub { vertical-align: baseline; position: relative; top: -0.4em; } sub { top: 0.4em; } 

为了使所有线条更高 ,与上标线条相同,请为整个段落定义更大的line-height

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

或者任何价值给你想要的效果。

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

编辑:为了使所有行看起来都相同, 当只有一个需要更多的垂直空间比其他人 ,段落中的所有行将不得不更高。

正如我所说,这可能不是一个有吸引力的解决scheme。 也许有些东西可以用跨度做,只是把子/文本缩小一些 ,除此之外,我不相信你想要什么。 但我想看看别人的解决scheme。

编辑2:顺便说一句,我已经尝试了一个小的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中,这些线条都是一样的高度(我不能说其他浏览器)

我一直使用line-height:normal作为上标,在Safari,Chrome和Firefox中对我来说工作正常,但我不确定IE。

在通讯上特别使用这个 –

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

我喜欢Milingu Kilu的解决scheme,但我更喜欢同样的精神

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

&sup1,&sup2等可能会做的伎俩。 上标是一个HTML技巧

Interesting Posts