14

親のテキスト装飾スタイルを否定または削除するにはどうすればよいですか? たとえば、次の例では、テキストとアンカーの両方にライン スルーのテキスト装飾がありますが、それをアンカー タグに適用しない方法はありますか?

<span style="text-decoration:line-through;">
    Dead Text 
    <a href="#" style="text-decoration:underline;color:Red;">Not Dead Text</a>
</span>

注:内部テキストをスパンでラップすることは、私が持っているものでは簡単なオプションではないため、可能であればcssスタイルに基づくソリューションを探しています.

4

4 に答える 4

5

私はそれが可能だとは思わない。サイトポイントから:

また、インライン ボックスのテキスト装飾は、子孫ボックスが含まれている場合でも、ボックス全体に沿ってレンダリングされます。これも、継承に似ているように見えるかもしれません。子孫ボックスのテキスト装飾設定は、祖先ボックスのテキスト装飾を「元に戻す」ことはできません。

于 2009-08-11T17:57:44.000 に答える
5

受け入れられた回答の次の行は正しくありません。

子孫ボックスのテキスト装飾設定は、祖先ボックスのテキスト装飾を「元に戻す」ことはできません。

決して言わないでくださいね。

IE の解決策はまだ見つかりません (取り消し線が に設定されているシナリオで作業している場合を除きます<TD>)。ただし、解決策の副作用と戦う必要がありますが、他のブラウザーでも可能です。

http://result.dabblet.com/gist/3713284/で自分の目で確かめてください。

要するにdisplay:table;、子供のスタイルに追加するだけです。何らかの理由で FFtableでは 、block、list-itemまたはのいずれかを使用できますtable-captionが、これらは Safari/Chrome では機能しません。

以下のコードを使用します。

<span style="text-decoration:line-through;">
   Dead Text
   <a href="#" style="text-decoration:underline;color:Red;">Undesired strikethrough</a>
</span>

<div style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a div</a>
</div>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display:  table;">display: table in a span</a>
</span>

<span style="text-decoration:line-through; display: block;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:block;"</a>
</span>

<span style="text-decoration:line-through; display: table-cell;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table;">display: table in a span with "display:table-cell;"</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: list-item;">display: list-item</a>
</span>

<span style="text-decoration:line-through;">
  Dead Text
  <a href="#" style="text-decoration:underline;color:Red; display: table-caption;">display: table-caption;</a>
</span>

于 2010-12-07T14:46:20.447 に答える
2

これも同様に機能します：display: inline-block

<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:Red;">This not works</a>
</span>
<br/>
<span style="text-decoration:line-through;">
Dead Text 
<a href="#" style="text-decoration:underline;color:blue;display:inline-block">This works</a>
</span>

于 2018-06-21T16:26:29.077 に答える