修复多跨的破损装饰

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

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

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

具有

a { text-decoration: underline; }

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

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

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

.superscript {vertical-align:super;}

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

这将有助于实际了解这两个应用程序的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>

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