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

Question

如果我<sup>在一个多行<p>标签中有一个标签,那么带有上标的行在其上方的行间距比其他行更大,无论我放在哪个行高<p>.

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

如何使其保持一致 - 即所有线条是否包含相同的间距<sup>？

您的解决方案必须是跨浏览器(IE 6 +,FF,safari,opera,chrome)

Answer 1

line-height确实修复了它,但是你可能需要让它变得非常大:在我的设置中,我必须在<sup>不再干扰它之前将行高增加到大约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;
    }

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

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

Answer 3

我有同样的问题,没有给出的答案工作.但我找到了一个git提交,其修复程序对我有用:

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

Answer 4

保持简单：

sup { vertical-align: text-top; }

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

Answer 5

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