Question

所以，我有

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

并且我的锚的下划线被打破（意味着R的下划线在基线处，并且5的下划线在R的中间 - 因为5很小），我不知道想。如何让锚点下划线为R和5下的一条连续线（在基线处）？

感谢。

Answer 1

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

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

与

a { text-decoration: underline; }

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

Answer 2

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

Answer 3

这有助于实际了解哪些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>

Answer 4

啊，实际上并不知道<sup>：*）我正在使用.superscript { font-size:xx-small; vertical-align:top; }

如果您想使用CSS for the superscript，则需要：

.superscript {vertical-align:super;}

但是，正如cletus所指出的那样，只需使用<sup>标签的语义正确且仍然时尚的方式。

Answer 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>

修复损坏<a> decoration with multiple spans</a>

5 个答案: