繼承的文字裝飾風格

如何否定或刪除父母的文字裝飾風格？例如，在下面的例子中，文本和錨點都有文字修飾，有沒有一種方法可以應用到錨點標記？繼承的文字裝飾風格

<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

繼承的文字裝飾風格

回答

相關問題