HTML <sup /> 标签影响行高，如何使其一致？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1530685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML <sup /> tag affecting line height, how to make it consistent?
提问by Andrew Bullock
If I have a <sup>tag in a multi-line <p>tag, the line with the superscript on it has a larger line spacing above it than the other lines, irregardless of what line-height I put on the <p>.
如果我<sup>在多行<p>标签中有一个标签，无论我在<p>.
Edit for clarification: I don't mean i have lots of <p>s, each which is on a single line. I have a single <p>with enough content in it to cause wrapping onto multiple lines. Somewhere (anywhere) in the text there may be a <sup>or <sub>. This affects the line height for that line by adding extra spacing above/below. If I set a larger line-height on the <p>this makes no difference to the problem. The line-height is increased, but the extra spacing still remains.
编辑澄清：我并不是说我有很多<p>s，每个都在一行上。我有一个<p>包含足够内容的单个内容以导致换行到多行。文本中的某处（任何地方）可能有<sup>或<sub>。这会通过在上方/下方添加额外的间距来影响该行的行高。如果我在上面设置了更大的行高，<p>这对问题没有任何影响。行高增加了，但额外的间距仍然存在。
How can I make it consistent - i.e. all lines have the same spacing whether they contain a <sup>or not?
我怎样才能使它一致 - 即所有行都具有相同的间距，无论它们是否包含 a <sup>？
Your solutions must be cross-browser (IE 6+, FF, safari, opera, chrome)
您的解决方案必须是跨浏览器的（IE 6+、FF、safari、opera、chrome）
回答by bobince
line-height does fix it, but you might have to make it pretty large: on my setttings I have to increase line-height to about 1.8 before the <sup>no longer interferes with it, but this will vary from font to font.
line-height 确实修复了它，但你可能需要让它变得非常大：在我的设置中，我必须在<sup>不再干扰它之前将 line-height 增加到大约 1.8 ，但这会因字体而异。
One possible approach to get consistent line heights is to set your own superscript styling instead of the default vertical-align: super. If you use topit won't add anything to the line box, but you may have to reduce font size further to make it fit:
获得一致行高的一种可能方法是设置您自己的上标样式而不是默认的vertical-align: super. 如果您使用top它不会向行框添加任何内容，但您可能需要进一步减小字体大小以使其适合：
sup { vertical-align: top; font-size: 0.6em; }
Another hack you could try is to use positioning to move it up a bit without affecting the line box:
您可以尝试的另一个技巧是使用定位将其向上移动一点而不影响行框：
sup { vertical-align: top; position: relative; top: -0.5em; }
Of course this runs the risk of crashing into the line above if you don't have enough line-height.
当然，如果您没有足够的行高，这会冒着撞到上面的行的风险。
回答by Ric
sup {
font-size: 0.83em;
vertical-align: super;
line-height: 0;
}
The trick is to set the <sup>'s line-height to 0. @Scott said to use normal, but this doesn't always work.
诀窍是将<sup>行高设置为 0。@Scott 说使用正常，但这并不总是有效。
This means you don't have to changethe line-height of surrounding text to accommodate the superscript text. I've tested this in IE7+ and the other major browsers.
这意味着您不必更改周围文本的行高以容纳上标文本。我已经在 IE7+ 和其他主要浏览器中对此进行了测试。
回答by PiTheNumber
I had the same problem and non of the given answers worked. But I found a git commitwith a fix that did work for me:
我遇到了同样的问题，但给出的答案都没有奏效。但是我发现了一个git commit，其中有一个对我有用的修复程序：
sup {
font-size: 0.8em;
line-height: 0;
position: relative;
vertical-align: baseline;
top: -0.5em;
}
回答by Milingu Kilu
keep it easy:
保持轻松：
sup { vertical-align: text-top; }
[font-sizedependent on your individual type-face]
[字体大小取决于您的个人字体]
回答by Anup Puri
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
回答by Dallas
I prefer to use lengthon the vertical-align. This aligns the baseline of the element at the given length above the baseline of its parent.
我更喜欢length在垂直对齐上使用。这将元素的基线在其父元素基线上方的给定长度处对齐。
sup {
font-size: .83em;
vertical-align: 0.25em;
line-height: 0;
}
回答by nth
The reason why the <sup>tag is affecting the spacing between two lines has to do with a number of factors. The factors are: line height, size of the superscript in relation to the regular font, the line height of the superscript and last but not least what is the bottom of the superscript aligning with...
If you set... the line height of regular text to be in a "tunnel band" (that's what I call it) of 135% then regular text (the 100%) gets white padded by 35% of more white. For a paragraph this looks like this:
<sup>标签影响两行间距的原因与许多因素有关。因素是：行高、上标相对于常规字体的大小、上标的行高以及最后但并非最不重要的一点是上标的底部与...对齐如果设置...行高常规文本在 135% 的“隧道带”（这就是我所说的）中，然后常规文本（100%）被白色填充 35% 的更多白色。对于一个段落，这看起来像这样：
p
{
line-height: 135%;
}
If you then do not white pad the superscript...(i.e. keep its line height to 0) the superscript only has the width of its own text... if you then ask the superscript to be a percentage of the regular font (for example 70%) and you align it with the middle of the regular text (text-middle), you can eliminate the problem and get a superscript that looks like a superscript. Here it is:
如果你然后不白色填充上标......（即保持其行高为0）上标只有它自己文本的宽度......如果你然后要求上标是常规字体的百分比（对于示例 70%) 并将其与常规文本的中间 (text-middle) 对齐，您可以消除问题并获得一个看起来像上标的上标。这里是：
sup
{
font-size: 70%;
vertical-align: text-middle;
line-height: 0;
}
回答by drmrbrewer
I prefer the solution suggested here, as exemplified by this jsfiddle:
我更喜欢这里建议的解决方案，正如这个 jsfiddle 所示：
CSS:
CSS：
sup, sub {
vertical-align: baseline;
position: relative;
top: -0.2em;
}
sub {
top: 0.2em;
}
HTML:
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>.
The beauty of this solution is that you can tailor the vertical positioning of the superscript and subscript, to avoid any clashes with the line above or below... in the above, just increase or decrease the 0.2emto suit your requirements.
这个解决方案的美妙之处在于您可以定制上标和下标的垂直定位，以避免与上方或下方的线发生任何冲突……在上面，只需增加或减少0.2em以满足您的要求即可。
回答by Rizzoli
¹, ² etc. might do the trick. it's an HTML trick to superscript
¹、² 等可能会起作用。这是上标的 HTML 技巧
