仅在CSS中上标？_编程黑洞网

我只能在CSS中完成上标吗？

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

我现在所拥有的看起来像这样：

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

，但是它不起作用。

自然地，我仅当<sup>允许HTML ...时，才使用content -tag。

您似乎有一个差异：垂直对齐顶部但_{？假设您是说^{？
在IE9中，“ vertical-align：text-top”不适用于我。但是，它是在FireFox 4.0中实现的。至少在Wordpress上下文中。
如果内容允许使用HTML，则关注点分离会受到影响。}}

#1 楼

您可以使用vertical-align: super做上标（加上相应的font-size减少量）。

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

同样，必须减小字体大小才能产生实际的上标效果。

–正常
2010年1月2日，下午5:14

@paulmurray在下面的回答更加准确和全面。恕我直言，这应该是公认的答案。

–道格·保罗
2012年2月14日在20:30

当有三种不同的排序答案方式时，说“在下面”并没有帮助。没错，保罗的答案是更好的答案，而且拥有五倍以上的选票真是太疯狂了。

– Peter Boughton
2012-2-22在17:47

#2 楼

老实说，我看不出仅在CSS中做上标/下标的意义。它没有方便的CSS属性，只有一堆本地实现，包括：

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

或使用vertical-align，或者我确定还有其他方法。事实是，它开始变得复杂：

行高上的CSS上标间距；

当心CSS上标/订阅的原因根本不应该使用CSS样式化上标/下标；

第二点值得强调。通常，上标/下标实际上不是样式问题，而是表示含义的原因。
旁注：值得一提的是，该实体列表包含常见的数学上标和下标表达式，即使此问题与

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

至于其余的CSS，：after伪元素和content属性并未得到广泛支持。如果您真的不想手动将其放入HTML中，那么我认为基于Javascript的解决方案是您的第二选择。使用jQuery，这很简单：

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

我认为“不受广泛支持”是指“ IE中不受支持”吗？

– Boldewyn
2010年1月7日在8:38

在兼容模式下，IE7及更低版本或IE8不支持quirksmode.org/css/contents.html。

–cletus
2010年1月7日在8:50

...我说的完全正确，是的。

– Boldewyn
2010年1月7日，9：38

为了简化用SUP标签包装A标签的方法，请使用以下命令：$（“ a.external”）。wrap（“ ^{”“）;

–罗素

2011年6月1日下午0:21
首先使用@PeterBoughton接受的解决方案，因为它不会使行高偏斜，所以选择了此解决方案。

– Nuri Hodges

13年7月15日在18:03}

#3 楼

CSS文档包含适用于所有HTML构造的行业标准CSS。也就是说：如今，大多数Web浏览器都没有显式处理SUB，SUP，B，I等-它们（kinda sorta）被转换为具有适当CSS属性的SPAN元素，而呈现引擎仅对此进行处理。 >
此页面为附录D。HTML4的默认样式表

所需的位为：

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

这可行，但是会弄乱行高。恕我直言，唯一不加高行高的方法是使用位置：相对于线虫建议：stackoverflow.com/a/501689/260080

– Marco Demaio
2012-03-20 15:02

#4 楼

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

如果您的主要文本有line-height: 1.5em ，则应减小上标文本的行高，以使其正确显示。我使用了line-height: 0.5em。

此外，vertical-align: super在大多数浏览器中都可以正常工作，但是在IE8中，当您有上标元素时，该行的其余部分将被向下推。因此，我改为使用vertical-align: baseline以及负top和position: relative来达到相同的效果，这似乎在浏览器中效果更好。

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

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

放在div容器中时会切断

– Alex G
16年6月27日，0：30

#5 楼

http://htmldog.com/articles/superscript/本质上：据我所知，

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

在实践中效果很好。

#6 楼

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

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

因此，在您的情况下，可能是这样的：

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

#7 楼

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

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 */

这样，您仍然可以使用sup / sub标记，但是您已修复了它们的愚蠢行为，从而总是弄乱段落的行高。 />
所以现在您可以执行以下操作：

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

您的段落行高不应该被弄乱。

经过测试IE7，IE8，FF3.6，SAFARI4，CHROME5，OPERA9

我使用p {line-height: 1.3;}进行了测试（这是一个很好的行高，除非您希望行粘得太紧），否则它仍然可以工作，原因是“ -0.6em”是一个很小的数目，以至于子行/子文本也适合该行高并且不会彼此重叠。

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

尽管答案已有十年历史，但这仍然是正确的方法。职位：相对；防止浏览器搞乱所有段落的行高分配。这种默认行为是如此奇怪，令我震惊，因为它是HTML呈现模型中的错误。

–赛龙
20/09/15 '15：29

#8 楼

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

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

#9 楼

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

#10 楼

检出：http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html

如果您想要“垂直对齐” ：text-top“

#11 楼

CSS属性font-variant-position正在考虑中，可能最终可以解决此问题。截至2017年初，虽然只有Firefox支持。

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

请参阅MDN。

现在是2020年春季，除Firefox之外，其他浏览器均不支持。嗯...

–詹斯
20年4月16日在9:50

#12 楼

相关或可能不相关，使用上标作为HTML元素或文本中的span + css可能会导致本地化问题-在本地化程序中。

例如说“第三者软件”：

3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software

译员如何翻译“ rd”？他们可以将其保留为几种西里尔语言为空，但其他奇特或RTL语言呢？

在这种情况下，最好避免使用上标并使用完整的措辞，例如“第三方软件” 。
或者，如其他注释中所述，通过jQuery在上标中添加加号。

#13 楼

尝试

.aftersup {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

或普通的“之后”

.after {
 font-size: 1em;
 margin: left;
 vertical-align: .7em;
}

“ .a.external：after”可以简化
或

.after {
 font-size: 50%;
 margin: left;
 vertical-align: .7em;
}

使用“字体大小50％”-什么大小的50％？如果未在某些用于定义上标之前的文本大小的标记中使用此方法，则可能无法正常工作。
如果您使用“ font-size：1em;”，那么必须确定字体大小，而不参考定义链接文本大小的标签，除非链接文本设置为100％并且上标是该100％的50％。
使用“ font-size：1em; ”实际设置字体大小基线。
如果要使上标字体比链接文本小，请设置“垂直对齐”大小
如果要上标，则将“ vertical-align”大小设置为与字体大小相同字体大小与链接文本相同
要与链接文本对齐，您需要将“ margin”设置为与链接文本相同（左，中，右，对齐）。

.text {
  font-size: 1em;
  margin: left;
}
.aftersup {
  font-size: 1em;
  margin: left;
  vertical-align: .7em;
}

像下面这样的示例链接带有上标

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup></p>

<p class="text"><a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>You got this</aftersup></p>

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only</a><aftersup>+</aftersup>

或

<a href="url">https://stackoverflow.com/questions/501671/superscript-in-css-only<aftersup>You got this</aftersup>

如图所示。 ..
仅在CSS中使用上标？+
或
仅在CSS中使用上标？您得到了这个

#14 楼

.superscript {
  position: relative;
  top: 5px;
  font-size: 90%;
  vertical-align: super;
}

#15 楼

这是sup使用的确切方法：

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

通过google chrome inspect元素找到了。

编程黑洞网

仅在CSS中上标？

评论