我怎样才能在CSS中完成上标？
我有一个样式表,我用上标字符标记外部链接,但我很难正确对齐字符.
我目前的情况如下:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但它不起作用.
当然,我<sup>只会在content允许HTML的情况下使用-tag ...
Pet*_*ton 473
你可以做上标 vertical-align: super,(加上随附的font-size减少).
但是,请务必阅读其他答案,特别是paulmurray和cletus的答案,以获取有用的信息.
cle*_*tus 182
老实说,我没有看到在CSS中做上标/下标的重点.它没有方便的CSS属性,只是一堆本土的实现,包括:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
或使用vertical-align或我确定其他方式.事情是,它开始变得复杂:
第二点值得强调.通常,上标/下标实际上不是造型问题,而是指示意义.
旁注:值得一提的是这个常见数学上标和下标表达式的实体列表,即使这个问题与此无关.
sub/sup标签使用HTML和XHTML.我会用那些.
至于CSS的其余部分,:after伪元素和内容属性不受广泛支持.如果你真的不想手动将它放在HTML中我认为基于Javascript的解决方案是你的下一个最好的选择.使用jQuery,这很简单:
$(function() {
$("a.external").append("<sup>+</sup>");
};
pau*_*ray 126
CSS文档包含所有HTML结构的行业标准CSS等效项.那就是:大多数Web浏览器,这些天没有明确处理SUB,SUP,B,I等等-他们(有点八九不离十)被转换成SPAN适当的CSS属性的元素,渲染引擎只与交易.
你想要的比特是:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
Les*_*ezi 25
我正在编写一个页面,目的是清晰易读文本,上标元素不改变行的顶部和底部边距 - 具有以下观察结果:
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;
}
Nic*_*sta 13
http://htmldog.com/articles/superscript/基本上:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知,在实践中运作良好.
小智 9
以下内容取自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
我测试使用a 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,我不知道此解决方案是否有效.