HTML <sup /> タグの影響線の高さ、その実現のみならず一貫した?

StackOverflow https://stackoverflow.com/questions/1530685

質問

しなければならない <sup> タグマルチライン <p> タグのラインを上付き文字で大きく線間隔でのライン、irregardlessのような高いの <p>.

編集のための明確化:言っていましたレ原宿店にて限定発売中。 <p>s各ありませんでした。私はシングル <p> 十分な内容では原因を包接複数の。どこかのどこでも)、テキストが <sup> または <sub>.この影響を受けて、線の高さを別につくって間隔を上/下さい。合より大きなline-heightの <p> この間の問題です。の高さは増加しましたが、余分な間隔はまだしっかりと残っています。

かとの整合性であり（すべてのラインが同じ間隔が含まれているかどうか <sup> はありませんか？

お解決のクロスブラウザIE6+,FF,サファリ、データの再活用やホームページクローム)

役に立ちましたか？

解決

line-heightなものがなければならなくなるかもしれか大きい:私のsetttingsしています増線-高さ約1.8前 <sup> 長を妨害するので、これよりわかりやすくフォントを揺るぎないコミットメントです。

このアプローチを一貫したラインハイツは自分自身で上付き文字スタイリングの代わりにデフォルト vertical-align: super.ご利用の場合 top いては何も付加のラインボックスできても削減へのフォントサイズまで適合:

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

他のhackきは、利用の位置を移動し、サンフランシスコに影響を与えずにラインボックス

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

もちろんこのリスクの衝突のライン上にいるのに十分なライン高さです。

他のヒント

sup {
        font-size: 0.83em;
        vertical-align: super;
        line-height: 0;
    }

トリックが0に<sup>の行の高さを設定することです@Scottは、通常使用するが、これは常に動作していないと述べています。

これはを意味上付き文字に対応するために、テキストを囲むのの行の高さを変更する必要はありません。私はIE7 +および他の主要なブラウザでこれをテストしてみた。

私は与えられた回答の同じ問題以外は働いていました。しかし、私はのgitのは、私のために仕事をした修正でのコミット見つけます：

sup {
  font-size: 0.8em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

を簡単にそれを維持：の

sup { vertical-align: text-top; }

[のフォントサイズのあなたの個々のタイプフェースに依存]

私は、垂直整列にlengthを使用することを好みます。これは、親のベースライン上で与えられた長さの要素のベースラインを整列させる。

sup {
   font-size: .83em;
   vertical-align: 0.25em;
   line-height: 0;
}

<sup>タグは2線の間隔に影響を及ぼしている理由は、多くの要因に関係しています。要因は、行の高さ、通常のフォントとの関係で上付き文字のサイズ、上付き文字の行の高さと最後ではなく、少なくともと上付き文字揃えの下でどのような... あなたは135パーセントの（それは私がそれを呼んだ）「トンネルバンド」にあるように...通常のテキストの行の高さを設定した場合、通常のテキスト（100％）以上の白色の35％白のパディングを取得します。段落の場合、これは次のようになります：

 p
    {
            line-height: 135%;
    }
あなたはその後、白パッドをしない場合、

上付き...（すなわち0にその行の高さを保つ）は上付き文字は、独自のテキストの幅を持っている...あなたは、その後、正規の割合であることを上付き文字を頼めばフォント（例えば70％）、あなたは、通常のテキスト（テキスト中央）の中央の位置に合わせ、あなたが問題を解消し、上付き文字のように見える上付き文字を取得することができます。ここでは、次のとおりです。

sup
{
    font-size: 70%;
    vertical-align: text-middle;
    line-height: 0;
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
sub { 
  top: 0.4em; 
}

すべての行がは背の高いの、上付き文字とラインと同じように見えるように作成するには、段落全体のために、より大きなline-heightを定義する

<p style='line-height:150%'>

またはどのような値あなたが望む効果を与えます。

これは奇妙に見えるかもしれないが、それはあなたがあなたの要件を説明した方法です。

編集：一つだけが他のより多くの垂直方向のスペースを必要とするとき、すべての行が同じに見えるようにするためには、の、段落内のすべての行は、背が高くなければならないだろう。

。

このを、私は魅力的なソリューションではないかもしれない、言ったように。たぶん何かがサブ/上付きの小さいと単なるテキストの作りスパンで行うことができ、それとは別に、私はあなたが達成することができますしたいものを信じていません。しかし、私は誰か他の人のソリューションを見てみたいと思います。

EDIT2：ちなみに、私は

を含む小さなHTMLファイルを試してみました 
<html>
<head>
<title>line-height</title>
<style>
p {
    line-height : 1.5em;
    width : 25em;
}
</style>
</head>
<body>
<p>Mary had a little lamb, its fleece<sup>1</sup> was white as snow, 
and everywhere that Mary went, the lamb<sub>2</sub> was sure to go.
</p>
</body>
</html>

と線がFF3.0.14とKonquerorの中のすべての同じ高さ（私は他のブラウザのために話すことができない）

サファリ、クロム、およびFirefoxで私のために正常に動作上付き文字、のために通常、私はIEについてはよく分からない：

私は、行の高さを使用してきました。

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

<sup style="font-size:9px; line-height:8px;">&reg;</sup>

私はMilingu Kiluのソリューションを好むが、同じ精神で私が好みます 
sup { vertical-align:top; line-height:100%; }

＆SUP1、SUP2＆などは、トリックを行う可能性があります。それは上付きするHTMLのトリックです。

ここをからの回答は、で動作しますphantomjsと電子メールに埋め込まれたHTMLの両方でます：

Lorem ipsum <sup style="font-size: 8px; line-height: 0; vertical-align: 3px">&reg;</sup>

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top