148

<sup>複数行のタグにタグがある場合<p>、上付き文字の付いた行は、行の高さに関係なく、他の行よりも上の行間隔が大きくなり<p>ます。

明確化のために編集: s がたくさんあり<p>、それぞれが 1 行にあるという意味ではありません。<p>複数の行に折り返すのに十分なコンテンツを含む単一のものがあります。テキストのどこかに (どこにでも)<sup>またはがある場合があります<sub>。これは、上下に余分なスペースを追加することで、その行の行の高さに影響します。より大きな行の高さを設定して<p>も、問題に違いはありません。行の高さは増加しますが、余分な間隔はそのままです。

一貫性を持たせるにはどうすればよいですか。つまり、a が含まれているかどうかに関係なく、すべての行の間隔は同じ<sup>ですか?

ソリューションはクロスブラウザーである必要があります (IE 6 以降、Firefox、Safari、Opera、Chrome)

4

15 に答える 15

190

line-height はそれを修正しますが、かなり大きくする必要があるかもしれません: 私の設定では、 line-height が<sup>干渉しなくなる前に約 1.8 に増やす必要がありますが、これはフォントによって異なります。

一貫した行の高さを得るために考えられる 1 つの方法は、デフォルトの代わりに独自の上付き文字スタイルを設定することですvertical-align: super。これを使用topしても行ボックスには何も追加されませんが、フォント サイズをさらに縮小して収まるようにする必要がある場合があります。

sup { vertical-align: top; font-size: 0.6em; }

あなたが試みることができる別のハックは、ラインボックスに影響を与えずに少し上に移動するために位置を使用することです:

sup { vertical-align: top; position: relative; top: -0.5em; }

もちろん、行の高さが十分でない場合、これは上の行にクラッシュするリスクがあります。

于 2009-10-07T10:39:09.503 に答える
109 
sup {
    line-height: 0;

    /* The following rules (or similar) likely come from browser 
     * style and are not needed
     */
    font-size: 0.83em;
    vertical-align: super;
}

秘訣は、<sup>の行の高さを 0 に設定することです。@Scott は通常を使用すると言いましたが、これは常に機能するとは限りません。

これは、上付きテキストに対応するために周囲のテキストの行の高さを変更する必要がないことを意味します。これを IE7+ およびその他の主要なブラウザーでテストしました。

于 2011-07-06T09:57:13.273 に答える
8

私は同じ問題を抱えていましたが、与えられた答えはどれもうまくいきませんでした。しかし、私にとってはうまくいった修正を含むgit commitを見つけました。

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
于 2013-03-18T09:23:48.790 に答える
2

<sup>タグが 2 行間の間隔に影響を与える理由は、多くの要因に関係しています。要因は次のとおりです: 行の高さ、通常のフォントに対する上付き文字のサイズ、上付き文字の行の高さ、そして最後に、上付き文字の下端との位置合わせ... 設定する場合... 行の高さ通常のテキストを 135% の「トンネル バンド」(私はこれと呼んでいます) に配置すると、通常のテキスト (100%) は 35% の白でパディングされます。段落の場合、これは次のようになります。

 p
    {
            line-height: 135%;
    }

次に、上付き文字を白で埋めない場合...（つまり、行の高さを0に保つ）上付き文字は、それ自体のテキストの幅しかありません...その後、上付き文字を通常のフォントのパーセンテージにするように要求すると（例 70%) を通常のテキストの中央に揃える (text-middle) と、問題が解消され、上付き文字のように見える上付き文字が得られます。ここにあります：

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}
于 2015-04-13T04:16:21.740 に答える
0

私は、上付き文字に line-height: normal を使用してきました。これは、Safari、Chrome、および Firefox では問題なく動作しますが、IE についてはわかりません。

于 2011-04-08T19:14:49.203 に答える
0

私はMilingu Kiluのソリューションが好きですが、同じ精神で私が好む

sup { vertical-align:top; line-height:100%; }
于 2014-05-13T11:42:57.930 に答える
0

これをニュースレターで特に使用する -

<sup style="font-size:9px; line-height:8px;">&reg;</sup>
于 2013-01-21T11:25:01.813 に答える