HTML< sup>标签影响线高度，如何使它一致？

问题描述

如果我在多行< p> 标记中有< sup> 不管我放在< p> 上的什么行高，它上面的上面的行间距比其他行都大。

编辑澄清：我不是说我有很多< p> 每个都在一条线上。我有一个单独的< p> 有足够的内容，导致包装到多行。文本中某处（任何地方）可能有< sup> 或< sub> 。这通过在上/下添加额外的间距来影响该线的线高度。如果我在< p> 上设置更大的行高，这对问题没有影响。

如何使它一致 - 即所有行都有相同的间距，不管它们是否包含<$ c

您的解决方案必须是跨浏览器（IE 6+，FF，safari，opera， chrome）

解决方案

line-height可以修复它，但你可能需要做得很大：在< sup> 不再干扰它之前将线高增加到约1.8，但这将因字体而异。

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

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

您可以尝试的另一个黑客是使用定位将其向上移动一点而不影响线框：

  sup {vertical-align：top;位置：相对; top：-0.5em; } 
  

当然，如果你没有足够的行， - 高。

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>.

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.

How can I make it consistent - i.e. all lines have the same spacing whether they contain a <sup> or not?

Your solutions must be cross-browser (IE 6+, FF, safari, opera, chrome)

解决方案

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.

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 top it won't add anything to the line box, but you may have to reduce font size further to make it fit:

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.

这篇关于HTML&lt; sup&gt;标签影响线高度，如何使它一致？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！