11

最近私は質問に答えました、そしてOPは要素のtext-decoration: underline;中に包まれたテキスト全体を望んでいましたが、中に包まれたものではなかったので、それはこのようなものでしたaspan

<a href="#"><span>Not Underline</span>Should Be Underlined</a>

だから単に与える

span {
   text-decoration: none;
}

span要素内に折り返されているテキストの下線は削除されません

しかし、これは下線を削除します

span {
   text-decoration: none;
   display: inline-block;
}

だから私はspananを作りinline-block、それが機能しました。それが私が通常行う方法です。しかし、説明に関しては、これを行うと、単に使用しない場合に下線が実際に削除される理由を説明できtext-decoration: none;ませんでした。

デモ

4

1 に答える 1

14

場合によっては、テキストの装飾が要素から特定の子孫に伝播されます。仕様では、これが発生する場合と発生しない場合 (および動作が明示的に定義されていない場合) をすべて説明しています。ここで、次の部分が該当します。

テキスト装飾は、浮動および絶対配置の子孫、またはインライン ブロックやインライン テーブルなどのアトミックなインライン レベルの子孫のコンテンツには反映されないことに注意してください。

この伝播は継承と同じではなく、完全に別の概念であることに注意してください。確かに、text-decoration: noneあなたtext-decoration: inheritが期待する方法で伝播に影響を与えません:

  • text-decoration: none単に「この要素には独自のテキスト装飾がない」ことを意味し、
  • text-decoration: inherit「この要素は、text-decorationその親と同じ指定値を持つ」ことを意味します。

どちらの場合でも、親テキストの装飾は、該当する要素に継承されます。を使用して、インライン ブロックにその親と同じテキスト装飾を強制することができますが、親が自身の先祖からの伝播によって取得するその他の装飾を持たないinheritようにすることができます。

display: inline-blockこれは、テキスト装飾の伝播を防ぐには、単に持つだけで十分であることも意味します。再度指定する必要はありませんtext-decoration: none。既に初期値になっています。

于 2012-12-13T10:31:28.117 に答える