Estilo de decoración de texto heredado

Question

¿Cómo puedo negar o eliminar un estilo de decoración de texto para padres? Por ejemplo, a continuación, tanto el texto como el delimitador tienen una decoración de texto de línea, ¿hay alguna forma de que no se aplique eso a la etiqueta de anclaje?

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

NOTA: envolver el texto interno en un lapso no es una opción fácil con lo que he así que estoy buscando una solución basada en los estilos css, si es posible.

Answer 1

No creo que sea posible. De SitePoint:

Además, decoraciones de texto en cajas de línea se representan a lo largo de todo el cuadro, aunque contenga las cajas descendientes. Esto, también, puede parecerse a la herencia . Cualquier configuración de decoración de texto en un cuadro descendiente nunca puede "deshacer" las decoraciones de texto de un cuadro de antepasado .

Answer 2

La siguiente línea en la respuesta aceptada es incorrecto:

Cualquier ajuste de la decoración de texto en un cuadro de descendiente nunca puede “deshacer” los decoraciones de texto de un cuadro de ancestro.

Nunca digas never, right?

no han encontrado una solución para IE todavía (a menos que se esté trabajando con un escenario donde el tachado se encuentra en una <TD>) sin embargo es posible que otros navegadores, aunque tendrá que luchar el lado -efectos de la solución.

Véase, por sí mismo en http://result.dabblet.com/gist/3713284/

En resumen: sólo tiene que añadir display:table; al estilo del niño. Por alguna razón, en FF puede usar cualquiera de table, block, list-item o table-caption pero estos no funcionan en Safari/Chrome.

Se utiliza el código de abajo:

<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

acabo de conocer, que si establece la posición: absoluta para el bloque, que funcionará tanto en cromo y 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>

Feo, pero puede ayudar en algunos casos;