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

Posted

技术标签:

【中文标题】HTML <sup /> 标签影响行高，如何使其保持一致？【英文标题】：HTML <sup /> tag affecting line height, how to make it consistent? 【发布时间】：2010-12-04 13:55:01 【问题描述】：

如果我在多行 &lt;p&gt; 标记中有一个 &lt;sup&gt; 标记，则带有上标的行上方的行距比其他行大，无论我放在哪个行高&lt;p&gt;.

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

我怎样才能使它保持一致 - 即所有行都具有相同的间距，无论它们是否包含 &lt;sup&gt;？

您的解决方案必须是跨浏览器（IE 6+、Firefox、Safari、Opera、Chrome）

【问题讨论】：

【参考方案1】：

line-height 确实可以解决它，但是您可能必须将其设置得很大：在我的设置中，我必须将 line-height 增加到大约 1.8，然后 &lt;sup&gt; 不再干扰它，但这会因字体而异到字体。

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

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

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

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

当然，如果你没有足够的行高，这会冒着撞到上面一行的风险。

【讨论】：

vertical-align 已修复，谢谢。在 IE8、Chrome 3 或 FF 3.5 中，即使是 300% 以上的巨大行高也无法修复它。我仍然得到 1-2px 的差异。 如前所述，如果行高太紧，这并不总是有效。 @simPod：同样的情况，vertical-align: bottom（虽然这对你的影响不如top），然后是position:relative;，top 是肯定的。 实际上我更喜欢 vertical-align: super 因为据我所知，它可以防止 IE8 中的行高出现一些显示故障。如果有更好的选择，我会尽量不要经常使用定位。粗心的顶部定位可能会导致项目后期出现级联问题。【参考方案2】： 
sup 
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;

诀窍是将&lt;sup&gt; 的行高设置为0。@Scott 说要使用正常，但这并不总是有效。

这意味着您不必更改周围文本的行高以适应上标文本。我已经在 IE7+ 和其他主流浏览器中测试过了。

【讨论】：

+1。如前所述，这可以防止与其他 line-height 属性发生冲突。当然，如果将整体line-height 设置为小，它仍然可能与上一行相交。 绝妙的解决方案，让铬不再行为不端！最简单的答案。 刚刚意识到这会影响周围文本的非默认行高。在这种情况下使用line-height: 100%。 这非常有效。此外，我发现line-height 的可能值为 0、1、1em 和 100%。所有这些都可以在 Chrome 和 Firefox 中使用。 对于我的用例，我也更喜欢这个答案：这个答案适用于 Gmail 中的电子邮件，接受的答案不适用。 ***.com/questions/21118072/…【参考方案3】：

我遇到了同样的问题，但没有一个给定的答案有效。但我找到了一个 git commit，其中包含对我有用的修复：

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

【讨论】：

【参考方案4】：

保持轻松：

sup  vertical-align: text-top;

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

【讨论】：

【参考方案5】：

我更喜欢here 建议的解决方案，例如this 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以适合您的要求。

【讨论】：

【参考方案6】：

&lt;sup&gt; 标签影响两行间距的原因与许多因素有关。这些因素是：行高，上标相对于常规字体的大小，上标的行高，最后但并非最不重要的是上标的底部与...对齐 如果您将...常规文本的行高设置为 135% 的“隧道带”（这就是我所说的），那么常规文本（100%）会被白色填充 35% 的白色。对于一个段落，它看起来像这样：

 p
    
            line-height: 135%;

如果你然后不白色填充上标...（即保持它的行高为0）上标只有它自己的文本的宽度...如果你然后要求上标是常规的百分比字体（例如 70%）并将其与常规文本的中间对齐（text-middle），您可以消除问题并获得看起来像上标的上标。这里是：

sup

    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;

【讨论】：

【参考方案7】： 
sup, sub 
  vertical-align: baseline;
  position: relative;
  top: -0.4em;

sub  
  top: 0.4em;

【讨论】：

请在您的代码中提供解释，以便 OP 可以从中学习。【参考方案8】：

我更喜欢在垂直对齐上使用length。这会将元素的基线在其父基线上方的给定长度处对齐。

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

【讨论】：

【参考方案9】：

我只需要在页面的一个部分更改默认的 行为，所以我在那里应用了一个类。对我来说也是垂直对齐：顶部工作得很好，增加了大约 4 个像素。

sup.my-class 
    vertical-align: top;
    position: relative;
    top: -4px;

【讨论】：

【参考方案10】：

要使所有行变高，看起来与带有上标的行相同，请为整个段落定义一个更大的line-height

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

或任何能产生你想要的效果的值。

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

编辑：为了使所有行看起来都一样当只有一个比其他行需要更多的垂直空间时，段落中的所有行都必须更高。

正如我所说，这可能不是一个有吸引力的解决方案。也许可以用一个跨度来做一些事情，只用子/上标更小的文本，除此之外，我不相信你想要的可以实现。但我想看看别人的解决方案。

EDIT2：顺便说一下，我尝试了一个包含

的小 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 不能解决它，这增加了空间是的，但是 sup 仍然有 额外的 空间 也许浏览器之间存在差异 - 毕竟，您接受的答案以“line-height does fix it”开头，但我们不知道浏览器 bobince 使用的是什么。【参考方案11】：

我一直在使用 line-height: normal 作为上标，在 Safari、Chrome 和 Firefox 中对我来说效果很好，但我不确定 IE。

【讨论】：

【参考方案12】：

在时事通讯上特别使用这个 -

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

【讨论】：

【参考方案13】：

我喜欢 Milingu Kilu 的解决方案，但我更喜欢同样的精神

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

【讨论】：

【参考方案14】：

&sup1、&sup2 等可能会成功。这是上标的 HTML 技巧

【讨论】：

【参考方案15】：

来自here 的回答，适用于 phantomjs 和电子邮件嵌入的 HTML：

Lorem ipsum &lt;sup style="font-size: 8px; line-height: 0; vertical-align: 3px"&gt;&amp;reg;&lt;/sup&gt;

【讨论】：

以上是关于HTML <sup /> 标签影响行高，如何使其保持一致？的主要内容，如果未能解决你的问题，请参考以下文章

HTML 标签

&lt;sub&gt; &lt;sup&gt;标签

html 常用标签补充

HTML常用标签和属性

在所有商标和注册商标符号周围添加上标 <sup> 标签

使用 CSS 修复 mpdf 中 sup 标签上方的额外间距