我怎么能得到上标做,只有在CSS?
我有一个样式表,我用上标字符标记外部链接,但我很难让字符正确对齐。
我目前拥有的是这样的:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但这并不奏效。
当然,我会使用<sup>-标签,只有当内容允许HTML…
我怎么能得到上标做,只有在CSS?
我有一个样式表,我用上标字符标记外部链接,但我很难让字符正确对齐。
我目前拥有的是这样的:
a.external:after {
font-size: 50%;
vertical-align: top;
content: "+";
}
但这并不奏效。
当然,我会使用<sup>-标签,只有当内容允许HTML…
当前回答
你可以用vertical-align: super来做上标(加上相应的字体大小减小)。
但是,一定要阅读这里的其他答案,特别是保罗默里和cletus的答案,以获得有用的信息。
其他回答
我不确定这是否相关,但我已经解决了我的问题²HTML实体,因为我无法在<label>标签内添加任何其他HTML标签。所以这个想法是使用ASCII码而不是css或HTML标签。
老实说,我不认为在CSS中只做上标/下标有什么意义。它没有方便的CSS属性,只有一堆本地实现,包括:
.superscript { position: relative; top: -0.5em; font-size: 80%; }
或者使用垂直对齐或者其他方式。问题是,事情开始变得复杂了:
CSS上标行高间距; 注意CSS的上标/下标为什么你可以说不应该样式上标/下标的CSS;
第二点值得强调。通常,上标/下标实际上不是样式问题,而是表示意义。
旁注:尽管这个问题与数学上标和下标表达式无关,但值得一提的是这个常见数学上标和下标表达式的实体列表。
sub/sup标记在HTML和XHTML中。我会用这些。
至于CSS的其他部分,伪元素和内容属性的:after并没有得到广泛支持。如果你真的不想把这个手动放在HTML中,我认为基于javascript的解决方案是你的下一个最佳选择。使用jQuery,这是简单的:
$(function() {
$("a.external").append("<sup>+</sup>");
};
CSS文档包含了所有HTML结构的行业标准CSS等价物。也就是说:现在大多数web浏览器都没有显式地处理SUB, SUP, B, I等等——它们(有点)被转换成具有适当CSS属性的SPAN元素,而渲染引擎只处理这些。
这个页面是附录d。HTML 4的默认样式表
你想要的是:
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }
sup { vertical-align: super }
http://htmldog.com/articles/superscript/本质上:
position: relative;
bottom: 0.5em;
font-size: 0.8em;
据我所知,在实践中效果很好。
这是另一个干净的解决方案:
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不触发标准/几乎标准模式时,这个解决方案是否有效。