IEの上付き下線

https://stackoverflow.com/questions/420770

05-07-2019
|

質問

時間が不足しているので簡潔にするつもりです。したがって、これが私が望んでいるほど詳細でない場合は謝罪します。

いくつかのコードがあります：

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

FFでは、これは希望どおりに機能し、リンク全体に下線が引かれます。ただし、IEでは、リンクは<！>＃174の下を除いて下線が引かれます。ハイフンの上にあるシンボルのように見え、とんでもない見た目です。

Googleで見つけたいくつかの提案を試しましたが、希望する効果を達成するのに役立つものはありません。残念ながら、下に境界線を追加するオプションはありません。これまでの最良の解決策は、CSSを使用してsupタグで下線を完全に切断することです。これにより、FFで問題なく動作し、IEでの見栄えが悪くなります。

これを手伝ってくれる人がいたら、このジレンマを解決しないといけないと言われたので、<sup>タグを削除するサイトをたどりたくありません。

UPDATE：sup {<！> quot; text-decoration：none <！> quot; }解決策は、今のところ行います。すべての場所にregマークがあるので、サイト全体を更新する必要があり、これは私たち全員が決定する価値があるよりも面倒でした。返信してくれた人に感謝します。

解決

<sup>タグは、トレードマークやregシンボルのようなものには適していません。

cssを使用することを好みます：

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

.regクラスを設定できる場合：

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

For：

<span class='reg'>&reg;</span>

他のヒント

リンクにクラスを追加したり、要素でラップしたりできない場合があります。サードパーティのコードを使用する必要がある場合、状況はそれほどまれではありません。ところで、要素にも同じ問題があります。

この場合、次のようなものを使用できます。

Firefoxの場合はそのまま下線を残します（すべて正常に見えます）

Chromeにこのようなスタイルを使用します（IEの場合と同じ問題があり、さらに困難です）：

[style]
a sup {
    text-decoration: none;
    display: inline-block; // without this previous property will not work
    border-bottom: 1px solid;
    line-height: 1.5em;    // this and following properties are used to shift
    margin-top: -1em;      // an element to make border aligned with underline
                       // can be used relative position or something else.
}
a sub {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid;
    line-height: 0.7em;
}
[/style]
[a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]

タグ内の[]については申し訳ありませんが、このf ***システムがどのようにコードサンプルを作成するかを理解することはできません。

まあ、それはエレガントな解決策ではありません。基本的に下線の代わりに境界線を使用します。 <！> quot; Active、Visted、Etc <！> quot;

に基づいて色をコーディングする必要があります

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

エリック

このように動作させました

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

Ericのソリューションが最も近いです。 display: inline要素はインライン要素なので、彼は<a>を持つ必要はありません。彼が行方不明になっているのはline-heightだけで、IE 6およびIE 7で境界線の下部を見ることができます。そうしないと、行が表示されません。

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

それはひどいように見えますが、IEが下線と上付き文字を組み合わせる方法のようです。境界線でカンニングできない場合は、CSSプランでa supの下線を削除することをお勧めします。 text-underline-positionと呼ばれるIEのみのプロパティがありますが、ここに役立つ値はありません。私は恐れています。

まだ知らない人のために、次のようにします：

a sup{text-decoration:none;}

Diodetusが言っているように、そして少しの研究が同意する傾向があるように、私はregマークがとにかくsup要素に入らないことを理解しています。

したがって、sup / underlineの問題に対処しているだけで、regマークを参照していることを忘れていると仮定すると、同じように見えるようにするために知っている唯一の解決策は、vertical-align: baselineまたはkillにすることですsupのtext-decoration。

border-bottomソリューションは、任意の<！> quot; p <！> quot;の下に行を配置します。 <！> quot; q <！> quot;または<！> quot; y <！> quot;代わりに、文字の下の脚を通します。これは、下線よりも2ピクセル低くなります。

別の方法は、<！> lt; a <！> gt;を作成することですposition：relative
<！> lt; sup <！> gt;位置：絶対; top：-3px; text-decoration：none;

追加の<！> amp; nbsp; <！> lt; / sup <！> gt;

の後

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow