2

単語の一部に下線を付けて表示できず、一部を下線なしで表示できないという問題があります。「登録済み」記号に下線を付けないようにします。

HTML：

<h3>Basecamp<span class="sup">&reg;</span></h3>

CSS：

h3 {
font-size: 21px;
color: #369;
font-weight: bold;
text-decoration: underline;
margin-top: 5px;
padding: 5px;
}

.sup {
vertical-align: super;
text-decoration: none; /*how do i get this off?!*/
font-size: 50%;
font-weight: 400;
}
4

3 に答える 3

3

使用するdisplay: inline-block

http://jsfiddle.net/WYwv2/3/

なぜこれが機能するのですか？スペックを見てみましょう

... インライン フォーマット コンテキストを確立するブロック コンテナーの場合、装飾は、ブロック コンテナーのすべてのインフロー インライン レベルの子をラップする匿名のインライン要素に伝達されます。他のすべての要素については、インフローの子に伝播されます。テキスト装飾は、浮動および絶対配置の子孫、またはインライン ブロックやインライン テーブルなどのアトミックなインライン レベルの子孫のコンテンツには反映されないことに注意してください。

于 2012-11-29T04:23:30.327 に答える
1

他のテキストを reg シンボルから分離しない限り、これは機能しません。

h3 {
font-size: 21px;
color: #369;
font-weight: bold;
margin-top: 5px;
padding: 5px;
}

h3 span {
text-decoration: underline;
}


h3 span.sup {
text-decoration: none;
vertical-align: super;
font-size: 50%;
font-weight: 400;
}

<h3><span>Basecamp</span><span class="sup">&reg;</span></h3>

http://jsfiddle.net/rohitazad/yTP9q/2/ <--更新ありがとうRohit

于 2012-11-29T04:09:11.773 に答える
0

デモを見る:- デモ

h3 span {
vertical-align: super;
text-decoration: none; 
font-size: 50%;
font-weight: 400;
display:inline-block;
}
于 2012-11-29T04:22:58.880 に答える