代码之家 › 专栏 › 技术社区 › MeBigFatGuy

修复多跨的破损装饰

underline anchor css

0

MeBigFatGuy · 技术社区 · 15 年前

所以,我有

<a href="#">R<span class="superscript">5</span></a>

我锚点的下划线被破坏了(意思是R的下划线在基线处,5的下划线在R的中间——因为5很小),我不想这样。如何使锚线在R和5(基线处)下成为一条完整的线?

谢谢。

5 回复 | 直到 15 年前

1

Tomas Markauskas 15 年前

我不确定它是否有效,或者是否有更好的解决方案,但是您可以删除下划线并添加 bottom-border 致 a 元素。

2

5

cletus 15 年前

你应该使用 <sup> 标签。这对我来说很好:

<a href="#">R<sup>5</sup></a>

具有

a { text-decoration: underline; }

我不知道你是如何实现上标的,但我会提到人们为什么不这么做的一个常见原因。他们认为上标被否决了,比如 <b> (它不是)或者它不是语义的(它是)。

3

0

Community CDub 8 年前

啊,不知道 <sup> 事实上,*)我用的是 .superscript { font-size:xx-small; vertical-align:top; }

如果你想用 CSS for the superscript ,您需要:

.superscript {vertical-align:super;}

但是,正如所指出的 cletus 只需使用语义正确的 <SUP> 标签。

4

0

meder omuraliev 15 年前

这将有助于实际了解这两个应用程序的CSS,但您可以使用 line-height 属性并显式定义 vertical-align 这两个值,如果不是,您可以尝试 bottom-border 而不是 text-decoration:underline .

a span.superscript { vertical-align:baseline; line-height:1; }

编辑:我没有经历过@ http://jsbin.com/orudi

  <a href="#">R<sup>5</sup></a>

  <style>
      body { width:5em; margin:0 auto; font-size:100%; padding:5em 0 0; background:#000; }
      a { text-decoration:underline; color:#fff; font-size:5em; }
      a sup { vertical-align:top; font-size:xx-small; font-size:.5em; }
  </style>

5

0

Adam C 15 年前

你可以试试我发现的这个CSS,它可以防止下标和上标破坏你的行高。它对我有用。

sup, sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 0.75em; font-weight: normal; }
sub { top: 0.4em; }

尝试以下化学配方:

MgNaA<sub>l5(</sub>Si<sub>4</sub>O<sub>10</sub>)<sub>3</sub>(OH)<sub>6</sub>

或

Radioactive Phosphorus-32 is <sup>32</sup>PO<sub>4</sub><sup>3-</sup>