css - 複数のスパンで壊れた装飾を修正

Answer 1

タグを使用する必要があります<sup>。これは私にとってはうまくいきます：

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

と

a { text-decoration: underline; }

上付き文字をどのように実装しているかはわかりませんが、人々がそうしない一般的な理由について言及します。彼らは、それが非推奨である<b>（そうではない）か、セマンティックではない（そうである）と考えています。

Answer 2

それが機能するかどうか、またはより良い解決策があるかどうかはわかりませんが、下線を削除bottom-borderしてa要素に a を追加できます。

Answer 3

私が見つけたこの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> 

Answer 4

ああ、実際には知りませんでした<sup>:*)私は使用していました.superscript { font-size:xx-small; vertical-align:top; }

上付き文字に CSSを使用する場合は、次のようにする必要があります。

.superscript {vertical-align:super;}

しかし、 cletusで指摘されているように、意味的に正しく、まだ流行している<sup>タグの使用を使用してください。

Answer 5

これらの両方にどの 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>