Унаследованный стиль оформления текста

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

Следующая строка в общепринятом ответе неверен:

Любой установка украшения текста на поле в потомке никогда не может «отменить» в текстовых отличий коробки предка.

Никогда не говорите никогда, верно?

Я не нашел решение для IE еще (если не случится работать со сценарием, где перечеркнутый устанавливается на <TD>), однако является возможно для других браузеров, хотя вам придется сражаться на стороне -эффекты решения.

Смотрите сами на http://result.dabblet.com/gist/3713284/

Короче говоря: просто добавьте display:table; в стиле ребенка. По какой-либо причине в FF вы можете использовать любые из table, 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>

Answer 3

Я просто нашел, что если вы установите позицию: абсолютная для блока, он будет работать как в хроме и 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>

Уродливый, но может помочь в некоторых случаях;