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

接受答案中的以下行不正确：

a上的任何文字装饰设置后代框永远不能“撤消” 祖先盒子的文字装饰。

永远不要说永远，对吧？

我还没有找到IE的解决方案（除非您碰巧使用的是<TD>上设置了删除线的情况），但可能适用于其他浏览器，虽然你将不得不与解决方案的副作用作斗争。

亲身体验http://result.dabblet.com/gist/3713284/

简而言之：只需将display:table;添加到孩子的风格中即可。出于某些原因，您可以使用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 for block，它将在chrome和FF中都有效：

＆＃13;

<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>

＆＃13;

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

Answer 3

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

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

Answer 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>

继承文本 - 装饰风格

4 个答案: