继承的文字装饰风格

如何否定或删除父母的文字装饰风格？例如，在下面的例子中，文本和锚点都有文字修饰，有没有一种方法可以应用到锚点标记？继承的文字装饰风格

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

注：包装在跨度内的文字是不是与我有什么，所以我在寻找基于CSS样式，如果可能的解决方案一个容易的选择。

来源

2009-08-11 JPero

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

此外，沿着整个箱体上渲染行内框的文字装饰，即使它包含后代盒。这也可能类似于继承。任何文字装饰设置在后代框上永远不能 “撤消” 祖先框的文字装饰。

来源

2009-08-11 17:57:44

呃。这就是我所害怕的。感谢您的答案和链接，它解释得很好！ – JPero 2009-08-11 18:05:44

其实，在特定的情况下，它*是可能的！我在下面的答案中添加了更完整的说明:-) – Potherca 2011-01-15 20:21:02

在接受回答以下行不正确：

在后裔框的任何文本装饰设置可从来没有“撤销”的祖先盒子的文本修饰。

永远不要说永远不对吧？

我还没有找到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>

来源

2010-12-07 14:46:20 Potherca

我才发现，如果你设置的位置：

：绝对块，它都将铬和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>

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

来源

2016-03-28 10:22:47

继承的文字装饰风格

回答

相关问题