继承的文本装饰风格答案

【问题标题】：Inherited Text-Decoration style继承的文本装饰风格
【发布时间】：2009-08-11 17:51:27
【问题描述】：

我将如何否定或删除父母的文本装饰样式？例如，在下面，文本和锚点都具有 line-through 的文本装饰，有没有办法不将其应用于锚点标签？

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

注意：将内部文本包装在跨度中并不是我所拥有的简单选择，因此如果可能的话，我正在寻找基于 css 样式的解决方案。

【问题讨论】：

标签： css text-decorations line-through

【解决方案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>

【讨论】：

不幸的是，这些变通办法似乎已经停止工作。在 Chromium 80 中，这些解决方案不会否定文本装饰。在 Firefox 72 中，只有 display: table-caption 保持不变。
@bleistift2 目前，span 或 div 中的 display: inline-block 或 span 或 div 中的 display: inline-table 似乎在大多数浏览器中都有效。我在result.dabblet.com/gist/3713284 设置了更详细的测试。我会在今天/本周晚些时候有空时更新我的答案。

【解决方案2】：

我不相信这是可能的。来自SitePoint：

此外，内联框中的文本装饰沿着整个盒子渲染，即使它包含后代框。这也可能看起来类似于遗产。任何文字装饰在后代盒子上设置永远不能 “撤消”文本的装饰祖盒。

【讨论】：

呃。这就是我害怕的。感谢您的回答和链接，它解释得很好！
实际上，在特定的情况下，它是可能的！我在下面的答案中添加了更完整的描述:-)

【解决方案3】：

我刚刚发现，如果你为 block 设置 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>

丑陋，但在某些情况下可以提供帮助；

【讨论】：

【解决方案4】：

这也可以：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>

【讨论】：