仅在 CSS 中使用上标？

Superscript in CSS only?

提问by Henrik Paul

How can I get superscript done, only in CSS?

我怎样才能完成上标，只有在 CSS 中？

I have a stylesheet where I mark the external links with a superscript character, but I'm having a hard time getting the character aligned correctly.

我有一个样式表，我用上标字符标记外部链接，但是我很难让字符正确对齐。

What I have currently, looks like this:

我目前拥有的，看起来像这样：

a.external:after {
  font-size: 50%;
  vertical-align: top;
  content: "+";
}

but it doesn't work.

但它不起作用。

Naturally, I'd use the <sup>-tag, only if contentwould allow for HTML...

当然，我会使用<sup>-tag，只有在content允许 HTML 的情况下...

回答by Peter Boughton

You can do superscript with vertical-align: super, (plus an accompanying font-sizereduction).

您可以使用vertical-align: super,做上标 （加上伴随的font-size减少）。

However, be sure to read the other answershere, particularly those by paulmurrayand cletus, for useful information.

但是，请务必阅读此处的其他答案，尤其是paulmurray和cletus 的答案，以获取有用的信息。

回答by cletus

Honestly I don't see the point in doing superscript/subscript in CSS only. There's no handy CSS attribute for it, just a bunch of homegrown implementations including:

老实说，我不认为仅在 CSS 中执行上标/下标有什么意义。它没有方便的 CSS 属性，只有一堆本土实现，包括：

.superscript { position: relative; top: -0.5em; font-size: 80%; }

or using vertical-align or I'm sure other ways. Thing is, it starts to get complicated:

或使用垂直对齐或我确定其他方式。事情是，它开始变得复杂：

• CSS superscript spacingon line height;
• Beware CSS for Superscript/Subcripton why you arguably shouldn't style superscript/subscript with CSS at all;

• 行高上的 CSS 上标间距；
• 当心CSS为标/ Subcript为什么你可以说是不应该的风格上标/下标与CSS可言;

The second point is worth emphasizing. Typically superscript/subscript is not actually a styling issue but is indicative of meaning.

第二点值得强调。通常上标/下标实际上不是样式问题，而是表示含义。

Side note:It's worth mentioning this list of entities for common mathematical superscript and subscript expressionseven though this question doesn't relate to that.

旁注：值得一提的是这个常见数学上标和下标表达式的实体列表，即使这个问题与此无关。

The sub/sup tags are in HTML and XHTML. I would just use those.

sub/sup 标签在 HTML 和 XHTML 中。我只会用那些。

As for the rest of your CSS, the :after pseudo-element and content attributes are not widely supported. If you really don't want to put this manually in the HTML I think a Javascript-based solution is your next best bet. With jQuery this is as simple as:

至于其余的 CSS， :after 伪元素和内容属性并未得到广泛支持。如果您真的不想将其手动放入 HTML，我认为基于 Javascript 的解决方案是您的下一个最佳选择。使用 jQuery，这很简单：

$(function() {
  $("a.external").append("<sup>+</sup>");
};

回答by paulmurray

The CSS documentation contains industry-standard CSS equivalent for all HTML constructs. That is: most web browsers these days do not explicitly handle SUB, SUP, B, Iand so on - they (kinda sorta) are converted into SPANelements with appropriate CSS properties, and the rendering engine only deals with that.

CSS 文档包含所有 HTML 结构的行业标准 CSS 等效项。那就是：大多数的网页浏览器，这些天没有明确处理SUB，SUP，B，I等等-他们（有点八九不离十）被转换成SPAN适当的CSS属性的元素，渲染引擎只与交易。

The page is Appendix D. Default style sheet for HTML 4

该页面是附录 D. HTML 4 的默认样式表

The bits you want are:

你想要的位是：

small, sub, sup { font-size: .83em }
sub             { vertical-align: sub }
sup             { vertical-align: super }

回答by Lessan Vaezi

I was working on a page with the aim of having clearly legible text, with superscript elements NOT changing the line's top and bottom margins - with the following observations:

我正在处理一个页面，目的是使文本清晰易读，上标元素不会改变行的顶部和底部边距 - 观察如下：

If for your main text you have line-height: 1.5emfor example, you should reduce the line-height of your superscript text for it to appear correctly. I used line-height: 0.5em.

line-height: 1.5em例如，如果对于您的主要文本，您应该减少上标文本的行高以使其正确显示。我用过line-height: 0.5em。

Also, vertical-align: superworks well in most browsers but in IE8 when you have a superscript element present, the rest of that line is pushed down. So instead I used vertical-align: baselinetogether with a negative topand position: relativeto achieve the same effect, which seems to work better across browsers.

此外，vertical-align: super在大多数浏览器中都运行良好，但在 IE8 中，当您有上标元素时，该行的其余部分会被下推。所以相反，我vertical-align: baseline与否定一起使用top并position: relative达到相同的效果，这似乎在跨浏览器中工作得更好。

So, to add to the "homegrown implementations":

因此，要添加到“本土实现”中：

.superscript {
    font-size: .83em;
    line-height: 0.5em;
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}

回答by Nick Presta

http://htmldog.com/articles/superscript/Essentially:

http://htmldog.com/articles/superscript/本质上：

position: relative;
bottom: 0.5em;
font-size: 0.8em;

Works well in practice, as far as I can tell.

据我所知，在实践中效果很好。

回答by Christian Stadler

The following is taken from Mozilla Firefox's internal html.css:

以下内容摘自 Mozilla Firefox 的内部 html.css：

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

So, in your case it would be something, like:

所以，在你的情况下，它会是这样的：

.superscript {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

回答by Marco Demaio

This is another clean solution:

这是另一个干净的解决方案：

sub, sup {vertical-align: baseline; position: relative; font-size: 70%;} /* 70% size of its parent element font-size which is good. */
sub {bottom: -0.6em;} /* use em becasue they adapt to parent font-size */
sup {top: -0.6em;} /* use em becasue they adapt to parent font-size */

In this way you can still use sup/subtags but you fixed their idious behavior to always screw up paragraph line height.

通过这种方式，您仍然可以使用 sup/sub标签，但您修复了它们的可恶行为以始终搞砸段落行高。

So now you can do:

所以现在你可以这样做：

  <p>This is a line of text.</p>
  <p>This is a line of text, <sub>with sub text.</sub></p>
  <p>This is a line of text, <sup>with sup text.</sup></p>
  <p>This is a line of text.</p>

And your paragraph line height should not get screwed up.

你的段落行高不应该被搞砸。

Tested on IE7, IE8, FF3.6, SAFARI4, CHROME5, OPERA9

在 IE7、IE8、FF3.6、SAFARI4、CHROME5、OPERA9 上测试

I tested using a p {line-height: 1.3;}(that is a good line height unless you want your lines to stick too close) and it still works, cause "-0.6em" is such a small amount that also with that line height the sub/sub text will fit and don't go over each other.

我使用 a 进行了测试p {line-height: 1.3;}（这是一个很好的行高，除非你想让你的行贴得太近）并且它仍然有效，因为“-0.6em”是一个很小的数量，即使是该行高，子/子文本也适合不要互相越过对方。

Forgot a detail that might be relevant I always use DOCTYPE in the 1st line of my page(specifically I use the HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">). So I don't know if this solution works well when browser is in quirkmode (or not standard mode) due to lack of DOCTYPE or to a DOCTYPE that does not triggers Standard/Almost Standard mode.

忘记了一个可能相关的细节我总是在页面的第一行使用 DOCTYPE （特别是我使用 HTML 4.01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">）。因此，我不知道当浏览器由于缺少 DOCTYPE 或 DOCTYPE 未触发标准/几乎标准模式而处于 quirkmode（或非标准模式）时，此解决方案是否有效。

回答by freexe

If you are changing the font size, you might want to stop shrinking sizes with this rule:

如果您要更改字体大小，您可能希望使用以下规则停止缩小字体大小：

sup sub, sub sup, sup sup, sub sub{font-size:1em !important;}

回答by Archrade

I am not sure if this is related but I have solved my problem with ²HTML entities as I wasn't able to add any other html tags inside a <label>tag. So the idea was using ASCII codes instead of css or HTML tags.

我不确定这是否相关，但我已经解决了²HTML 实体的问题， 因为我无法在<label>标签中添加任何其他 html 标签。所以这个想法是使用 ASCII 代码而不是 css 或 HTML 标签。

回答by hashchange

The CSS property font-variant-positionis under consideration and may eventually be the answer to this question. As of early 2017, only Firefox supports it, though.

CSS 属性font-variant-position正在考虑中，最终可能是这个问题的答案。不过，截至 2017 年初，只有 Firefox 支持它。

.super {
    font-variant-position: super;
}

See MDN.

请参阅MDN。