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

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

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

Любая настройка оформления текста на потомок никогда не может "отменить" текстовое оформление предка.

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

Я пока не нашел решения для 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 2

Я только что обнаружил, что если вы установите position: absolute для блока, он будет работать как в Chrome, так и в 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>

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

Answer 3

Это также работает: display: inline-block

<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="text-decoration:underline;color:blue;display:inline-block">This works</a>
</span>

Answer 4

Я не верю, что это возможно. От SitePoint :

Кроме того, текстовые украшения на встроенных коробках оказываются по всей коробке, даже если он содержит ящики-потомки. Это тоже может показаться похожим на наследование. Любое оформление текста установка на поле потомка никогда не может «Отменить» текст украшения коробка предка.