我怎么能得到上标做，只有在CSS?
我有一个样式表，我用上标字符标记外部链接，但我很难让字符正确对齐。
我目前拥有的是这样的:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但这并不奏效。
当然，我会使用<sup>-标签，只有当内容允许HTML…
当前回答
我在一个页面上工作，目的是有清晰易读的文本，上标元素不改变行顶部和底部的空白-以下是观察结果:
如果你的主文本有行高:例如1.5em，你应该降低上标文本的行高以使其正确显示。我使用线高:0.5em。
此外，vertical-align: super在大多数浏览器中都运行良好，但在IE8中，当你有一个上标元素时，该行其余部分会被下推。因此，我使用vertical-align: baseline加上负的顶部和position: relative来达到同样的效果，这似乎在各种浏览器中都能更好地工作。
因此，要添加到“本地实现”:
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
其他回答
查看:http://www.cssdesignpatterns.com/Chapter%2012%20-%20ALIGNING%20CONTENT/Vertical-aligned%20Content/example.html
如果你想要"vertical-align:text-top"
这是另一个干净的解决方案:
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过渡// zh " "http://www.w3.org/TR/html4/loose.dtd">)。所以我不知道当浏览器处于quirkmode(或非标准模式)时，由于缺乏DOCTYPE或DOCTYPE不触发标准/几乎标准模式时，这个解决方案是否有效。
.superscript {
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
}
我在一个页面上工作，目的是有清晰易读的文本，上标元素不改变行顶部和底部的空白-以下是观察结果:
如果你的主文本有行高:例如1.5em，你应该降低上标文本的行高以使其正确显示。我使用线高:0.5em。
此外，vertical-align: super在大多数浏览器中都运行良好，但在IE8中，当你有一个上标元素时，该行其余部分会被下推。因此，我使用vertical-align: baseline加上负的顶部和position: relative来达到同样的效果，这似乎在各种浏览器中都能更好地工作。
因此，要添加到“本地实现”:
.superscript {
font-size: .83em;
line-height: 0.5em;
vertical-align: baseline;
position: relative;
top: -0.4em;
}
http://htmldog.com/articles/superscript/本质上:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知，在实践中效果很好。
