0

主要なすべてのブラウザーで同じ奇妙な問題が発生します。要素が 2 つのtext-decorationプロパティでスタイル設定されます。

テキスト装飾

最初の装飾は親要素に由来し、2 番目の装飾は要素自体に由来します。関連する HTMLは次のとおりです。

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
</div>

追加するのではなく、最初の宣言をオーバーライドする方法は?

4

1 に答える 1

5

表示されているのは、親のテキスト装飾が子要素のテキストに適用されることです。これは、子のテキストも親のテキストの一部と見なされるためです。詳しくはスペックをご覧ください。

現在、テキスト フローを維持しながら、子の親テキストの装飾をキャンセルする方法はありません。子要素をフロートまたは絶対配置するか、インライン ブロックにすることもできますが、それによってレイアウトが変更されます。text-decorationそれが望ましくない場合は、親スタイルを親内の子要素の兄弟などに移動する方法を見つける必要があります。親要素内に裸のテキストがある場合、それは兄弟でラップする必要があることを意味します。たとえば、次の追加テキストがあるとします。

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
    world
</div>

それをラップし、それに応じて宣言を移動する必要があります。

<div>
    <span style="text-decoration: line-through">Hello</span>
    <span style="text-decoration: underline">world</span>
</div>
于 2013-06-19T14:30:30.380 に答える