継承されたテキストデコレーションスタイル

Question

親のテキストデコレーションスタイルを否定または削除するにはどうすればよいですか？たとえば、以下の例では、テキストとアンカーの両方にラインスルーのテキストデコレーションがありますが、アンカータグに適用されていない方法はありますか？

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

注：スパンで内部テキストをラップすることは、私はので、私は可能な場合は、CSSスタイルをベースにしたソリューションを探していたものと簡単にオプションではありません。

Answer 1

私はそれが可能であるとは思わない。

また

、それが子孫のボックスが含まれていても全体ボックス、 に沿って描画され インラインボックスにテキスト装飾：SitePointから。 これも、 の継承と同じように表示されることがあります。子孫のボックスにテキストの装飾 を設定することはできません 祖先のボックスのテキストの装飾を「取り消し」します。

Answer 2

受け入れ答えに次の行が正しくありません： 子孫ボックスの

任意のテキストの装飾の設定は、先祖ボックスの テキスト装飾を「元に戻すない」決してすることができます。

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

（あなたが取り消し線が <TD>に設定されているシナリオで作業することが起こる場合を除き）あなたが側を戦うために持っていますが、それ は、他のブラウザのための可能なですが、私はまだIEのための解決策を見つけていない

- ソリューションの効果。

は要するにhttp://result.dabblet.com/gist/3713284/

で自分のために参照してください：ちょうど子供のスタイルにdisplay:table;を追加します。 FFの何らかの理由でtable,block,list-itemまたはtable-captionのいずれかを使用できますが、Safari/Chromeでは動作しません。

それは以下のコード使用：ブロックのために絶対的な、それはChromeとFFの両方で動作します：私はちょうどあなたがポジションを設定した場合ことが見出さ

<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>

Answer 3

を

<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="position: absolute;margin-left: 5px;text-decoration:underline;color:Red;">This works</a> 
 
</span>

醜いですが、場合によっては助けになることもあります。