只有CSS的上标？

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

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

我目前的情况如下:

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

但它不起作用.

当然,我只会在content允许HTML的情况下使用-tag ...

1> Peter Bought..：

---

你可以做上标 vertical-align: super,(加上随附的font-size减少).

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

---

此外,必须减少`font-size`以提供实际的上标效果.

---

@ paulmurray下面的答案更加准确和全面.恕我直言,这应该是公认的答案.

---

当有三种不同的排序方式时,说"下面"并不会有所帮助.你是对的,[保罗的回答](http://stackoverflow.com/questions/501671/superscript-in-css-only#answer-572967)_是一个更好的,这是疯了,这个数量超过五倍票.

2> cletus..：

---

老实说,我没有看到在CSS中做上标/下标的重点.它没有方便的CSS属性,只是一堆本土的实现,包括:

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

或使用vertical-align或我确定其他方式.事情是,它开始变得复杂:

CSS上标间距在线高;

小心为上标/ Subcript CSS为什么你可以说是不应该的风格上标/下标与CSS 可言 ;

第二点值得强调.通常,上标/下标实际上不是造型问题,而是指示意义.

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

sub/sup标签使用HTML和XHTML.我会用那些.

至于CSS的其余部分,:after伪元素和内容属性不受广泛支持.如果你真的不想手动将它放在HTML中我认为基于Javascript的解决方案是你的下一个最好的选择.使用jQuery,这很简单:

$(function() {
  $("a.external").append("+");
};

---

我认为"没有得到广泛支持"的意思是"IE不支持".

---

......这正是我所说的,是的.

---

在兼容模式下,IE7及更低版本或IE8中不支持http://www.quirksmode.org/css/contents.html.

---

首先使用@PeterBoughton接受的解决方案，因为它不会使行高偏斜，所以选择了该解决方案。

3> paulmurray..：

---

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

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

你想要的比特是:

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

---

这可行,但它搞砸了'line-height`.恕我直言,不要搞砸`line-height`的唯一方法是使用cletus建议的`position:relative`:http://stackoverflow.com/a/501689/260080

4> Lessan Vaezi..：

---

我正在编写一个页面,目的是清晰易读文本,上标元素不改变行的顶部和底部边距 - 具有以下观察结果:

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

5> Nick Presta..：

---

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> Marco Demaio..：

---

这是另一种清洁解决方案:

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标签,但你修复了他们的愚蠢行为,总是搞砸段落行高度.

所以现在你可以这样做:

  
This is a line of text.
  
This is a line of text, with sub text.
  
This is a line of text, with sup text.
  
This is a line of text.

你的段落线高度不应该搞砸了.

测试了IE7,IE8,FF3.6,SAFARI4,CHROME5,OPERA9

我测试使用a p {line-height: 1.3;}(这是一个很好的线高,除非你想让你的线太贴近)并且它仍然有效,因为"-0.6em"是一个很小的数量,同样具有该行高度的子/子文本将适合并且不要互相攻击.

忘记了可能相关的细节我总是在页面的第一行使用DOCTYPE (特别是我使用的是HTML 4.01 ).因此,当浏览器处于quirkmode(或非标准模式)时,由于缺少DOCTYPE或不触发标准/几乎标准模式的DOCTYPE,我不知道此解决方案是否有效.