Stile testo ereditato-Decorazione

Question

Come si nega o si rimuove uno stile di decorazione del testo dei genitori? Per esempio nel seguito, sia il testo che l'ancora hanno una decorazione testuale di line-through, c'è un modo per non applicare quello applicato al tag anchor?

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

NOTA: avvolgendo il testo interno in un arco non è una scelta facile con quello che ho, quindi sono alla ricerca di una soluzione basata sugli stili CSS, se possibile.

Answer 1

Non credo sia possibile. Da SitePoint:

Inoltre, decorazioni di testo sui riquadrati in riga sono resi lungo l'intera scatola, anche se contiene scatole discendenti. Anche questo potrebbe sembrare simile all'ereditarietà . Qualsiasi impostazione di testo su una casella discendente non può mai "annullare" le decorazioni di testo di una casella di antenato .

Answer 2

La seguente riga nella risposta accettata non è corretto:

Qualsiasi testo impostazione decorazione su una scatola discendente può mai “annullare” i decorazioni di testo di una casella di antenato.

Mai dire mai, giusto?

non ho ancora trovato una soluzione per IE (a meno che non vi capita di lavorare con uno scenario in cui il barrato si trova su un <TD>) tuttavia è possibile per altri browser, anche se si dovrà combattere il lato -effetti della soluzione.

vedere di persona presso http://result.dabblet.com/gist/3713284/

In breve: basta aggiungere display:table; allo stile del bambino. Per qualche motivo in FF è possibile utilizzare uno qualsiasi di table, block, list-item o table-caption ma questi non funzionano in Safari/Chrome.

Utilizza il codice qui sotto:

<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

Ho appena scoperto, che se si imposta position: absolute per il blocco, funzionerà sia in cromo e FF:

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

Brutto, ma può aiutare in alcuni casi;