Inherited Text-Style de décoration

Question

Comment annuler ou supprimer un style de décoration de texte parent? Par exemple dans ce qui suit, le texte et l'ancre ont tous deux une décoration de texte, y a-t-il un moyen de ne pas l'appliquer à l'étiquette d'ancrage?

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

REMARQUE: envelopper le texte intérieur dans une période n'est pas une option facile avec ce que j'ai donc je suis à la recherche d'une solution sur la base des styles CSS si possible.

Answer 1

Je ne crois pas que ce soit possible. De SitePoint:

En outre, des décorations de texte sur boîtes en-ligne sont rendus sur toute la boîte, même si elle contient des boîtes descendants. Cela peut également sembler similaire à l'héritage . Tout paramètre de décoration de texte placé sur une case descendante ne peut jamais "annuler" les décorations de texte d'une boîte ancêtre .

Answer 2

La ligne suivante dans la réponse acceptée est incorrecte:

Tout paramètre de décoration de texte sur une boîte descendante ne peut jamais « défaire » les décorations de texte d'une boîte ancêtre.

Ne dites jamais jamais, non?

Je n'ai pas trouvé une solution pour IE encore (à moins que vous travailler avec un scénario où le biffés est situé sur une <TD>) mais il est possible pour les autres navigateurs, bien que vous devrez combattre le côté -effets de la solution.

Voir pour vous-même à http://result.dabblet.com/gist/3713284/

En bref: il suffit d'ajouter display:table; au style de l'enfant. Pour une raison quelconque dans FF, vous pouvez utiliser l'un des table, block, list-item ou table-caption mais ceux-ci ne fonctionnent pas dans Safari/Chrome.

Il utilise le code ci-dessous:

<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

Je viens de découvrir que si vous définissez position: absolute pour le bloc, il fonctionnera aussi bien en chrome et 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>

Laide, mais peut aider dans certains cas;