4

私は次のHTMLを持っています：

<p style="font-family:Verdana">test<sup>2</sup></p>
<p style="font-family:Verdana;vertical-align:top">test<sup>2</sup></p>

問題は、2番目に

これ<sup>はテキストの上ではなく、数ピクセル下に配置されます。本質的にvertical-align:top、上付き文字を除くすべてのテキストが上に表示されます。

Chrome 23 Windows

これはFirefox、Operaでは発生しませんが、ChromeとSafari（すべてのWindows）で発生し、一部のフォント（Times New Romanなど）では発生しません。

これはフォントの問題ですか、それとも実際にはWebkitのバグだと思いますか？すでにバグが報告されており、テストケースを添付しましたが、そのバグが3年以上前に報告されているため、どれだけ早く解決されるかわかりません...

回避策のアイデアはありますか？可能であれば、CSSを変更するだけです。

アップデート

提案された解決策を試しましたが、ほとんどの場合、supタグを使用した場合と同じように表示されます。

さまざまな実装を示すためにフィドルを作成しました。

Chromeのバグレポート：http ：//code.google.com/p/chromium/issues/detail？id = 23634

4

3 に答える 3

5

supこの要素はさまざまな問題を引き起こし、活字的に正しい上付き文字を生成することは決してないため、この要素の使用は避けてください。

ドキュメントで上付き文字2のみが必要な場合は、SUPERSCRIPT TWO文字をそのまま使用するか、「²」を使用するか、エンティティ参照を使用します&sup2;。これは、フォントデザインに合わせてタイポグラファーがデザインしたテキスト文字を使用することを意味します。

さまざまな種類の上付き文字が必要で、それらすべてを上付き文字として表現できない場合は、spanフォントサイズを小さくして文字を大きくする要素とスタイルを使用するvertical-alignことをお勧めします。他の場所で設定された垂直方向の配置に干渉します）。例：

span.sup {
    font-size: 80%;
    position: relative;
    bottom: 1ex;
}
于 2012-12-06T12:17:54.837 に答える
1

特に、.cssファイル内のすべてのsup要素にグローバルスタイルを設定するための要素としてすべてをすでに追加している場合は、はるかに簡単であることがわかりました。そのようです。

sup {font-size: 80%; position: relative;bottom: .8ex;}
于 2013-05-28T12:53:26.947 に答える
0

私の意見では&sup2;、意味的な意味があるため、cssスタイリングよりもエンティティを使用する方が適切です。

于 2014-02-25T14:59:17.997 に答える