影响行高的HTML 标记，如何使其一致？

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

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

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

您的解决scheme必须是跨浏览器（IE 6 +，FF，Safari，Opera，Chrome）

行高确实解决了这个问题，但是你可能需要把它做的很大：在我的设置中，我必须在之前将行高增加到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; }

诀窍是将的行高设置为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; }

为什么标签影响两行之间的间距的原因与许多因素有关。这些因素是：行高，上标与正常字体的大小，上标的行高以及最后但并非最不重要的是上标的底部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技巧

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