使用多个跨度修复损坏的 <a> 装饰答案

【问题标题】：Fix broken <a> decoration with multiple spans使用多个跨度修复损坏的 <a> 装饰
【发布时间】：2009-10-19 02:43:35
【问题描述】：

所以，我有

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

我的锚的下划线坏了（意味着 R 的下划线在基线处，而 5 的下划线在 R 的中间——因为 5 很小），我没有想。我如何让锚下划线成为 R 和 5（在基线处）下的一条不间断线？

谢谢。

【问题讨论】：

那部分的 CSS 是什么样的？
这只是一个问题，因为您让我们猜测您实际上是如何应用该样式的。
下划线是R5还是5？
下划线在 R 和 5 的下方，但是线是断的。它在 R 下的基线，在 5 下的字体高度（x-height）的中心

标签： css anchor underline

【解决方案1】：

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

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

与

a { text-decoration: underline; }

我不知道你是如何实现上标的，但我会提到人们为什么不这样做的一个常见原因。他们认为它像 <b> 一样被弃用（它不是）或者它不是语义的（它是）。

【讨论】：

啊，实际上不知道 ^{:*) 我使用的是 .superscript { font-size:xx-small;垂直对齐：顶部； }}

【解决方案2】：

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

【讨论】：

这似乎可行，尽管我必须使用底部边框的已访问颜色来玩技巧 - 足够好，谢谢。

【解决方案3】：

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

如果你想使用CSS for the superscript，你需要这个：

.superscript {vertical-align:super;}

但是，正如cletus 所指出的，只需使用语义正确且仍然流行的<sup> 标签。

【讨论】：

有趣——实际上是vertical-align:super;并且 ^{将字母推到行高之上，这不像 vertical-align:top 那样简洁……但显然我正在分裂头发。谢谢大家。}
上标应该将其推到行高/基线之上。您想要的是让文本大小减半，但使用相同的基线。

【解决方案4】：

这将有助于实际了解对这两者应用什么 css，但您可以使用 line-height 属性并为这两者显式定义一致的 vertical-align 值，如果不是，您可以尝试 @987654324 @ 而不是 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】：

你可以试试我找到的这个 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>

【讨论】：