只有CSS的上标？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了只有CSS的上标？相关的知识，希望对你有一定的参考价值。
我怎样才能在CSS中完成上标？
我有一个样式表，我用上标字符标记外部链接，但我很难正确对齐字符。
我目前的情况如下：
a.external:after
font-size: 50%;
vertical-align: top;
content: "+";
但它不起作用。
当然，只有当<sup>允许使用html时，我才会使用content-tag ...
你可以用vertical-align: super做上标，（加上随附的font-size减少）。
但是，请务必阅读其他答案，特别是paulmurray和cletus的答案，以获取有用的信息。
CSS属性font-variant-position正在考虑之中，最终可能是这个问题的答案。截至2017年初，只有Firefox支持它。
.super
font-variant-position: super;
见MDN。
如果你想要“vertical-align：text-top”
.superscript
position: relative;
top: 5px;
font-size: 90%;
vertical-align: super;
这是sup使用的确切方式：
.superscript
vertical-align:super;
font-size:smaller;
通过谷歌chrome检查元素找到这个。
相关或可能不相关，使用上标作为HTML元素或文本中的span + css可能会导致本地化程序中的本地化问题。
例如，让我们说“第三方软件”：
3<sup>rd</sup> party software
3<span class="superscript">rd</span> party software
翻译如何翻译“rd”？他们可以为几种西里尔语言留空，但其他异国语言或RTL语言呢？
在这种情况下，最好避免使用上标并使用完整的措辞，如“第三方软件”。或者，如其他评论中所述，通过jQuery添加上标的加号。
老实说，我没有看到在CSS中做上标/下标的重点。它没有方便的CSS属性，只是一堆本土的实现，包括：
.superscript position: relative; top: -0.5em; font-size: 80%;
或使用vertical-align或我确定其他方式。事情是，它开始变得复杂：
- CSS superscript spacing线高;
- Beware CSS for Superscript/Subcript为什么你可以说根本不应该用CSS设置上标/下标的样式;
第二点值得强调。通常，上标/下标实际上不是造型问题，而是指示意义。
旁注：尽管这个问题与此无关，但值得一提的是list of entities for common mathematical superscript and subscript expressions。
sub / sup标签使用HTML和XHTML。我会用那些。
至于CSS的其余部分，：after伪元素和内容属性不受广泛支持。如果你真的不想手动将它放在HTML中我认为基于javascript的解决方案是你的下一个最佳选择。使用jQuery，这很简单：
$(function()
$("a.external").append("<sup>+</sup>");
;
CSS文档包含所有HTML结构的行业标准CSS等效项。那就是：现在大多数网络浏览器没有明确处理SUB，SUP，B，I等等 - 它们（有点sorta）被转换为具有适当CSS属性的SPAN元素，并且渲染引擎只处理它。
该页面是Appendix D. Default style sheet for HTML 4
你想要的比特是：
small, sub, sup font-size: .83em
sub vertical-align: sub
sup vertical-align: super
我正在编写一个页面，目的是清晰易读文本，上标元素不改变行的顶部和底部边距 - 具有以下观察结果：
例如，如果您的主文本中有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;
http://htmldog.com/articles/superscript/基本上：
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知，在实践中运作良好。
以下内容取自Mozilla Firefox的内部html.css：
sup
vertical-align: super;
font-size: smaller;
line-height: normal;
所以，在你的情况下，这将是一些东西，如：
.superscript
vertical-align: super;
font-size: smaller;
line-height: normal;
这是另一种清洁解决方案：
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">）。因此，当浏览器处于quirkmode（或非标准模式）时，由于缺少DOCTYPE或不触发标准/几乎标准模式的DOCTYPE，我不知道此解决方案是否有效。
如果要更改字体大小，可能需要使用此规则停止缩小大小：
sup sub, sub sup, sup sup, sub subfont-size:1em !important;
我不确定这是否相关但我已经用² HTML实体解决了我的问题，因为我无法在<label>标记内添加任何其他html标记。所以这个想法是使用ASCII代码而不是css或HTML标签。
以上是关于只有CSS的上标？的主要内容，如果未能解决你的问题，请参考以下文章
Latext上标下标 ( 右侧上标下标 | 任意字符的正上标记 | 任意字符的正下标记 | 常用数学符号的上标和下标 | 加和 | 乘积 | 交集 | 并集 | 上积 | 极限 | 上弧 )