爲什麼顯示：inline-block;從子元素中刪除下劃線？

Question

最近我回答的問題和OP希望text-decoration: underline;用於包裹a元素中的全部文本，但裏面span不是一個包，於是就出現了這樣的事情

<a href="#"><span>Not Underline</span>Should Be Underlined</a> 

所以，簡單地給

span { 
    text-decoration: none; 
} 

不刪除下劃線的包裹span元素

內的文本但這並刪除underl INE

span { 
    text-decoration: none; 
    display: inline-block; 
} 

所以我做了一個span和inline-block它的工作，這是多麼我通常做。但是當解釋時，我無法解釋爲什麼這樣做實際上刪除了下劃線，而僅僅使用text-decoration: none;沒有。

Demo

Answer 1

文本裝飾品是從元件傳播到在某些情況下某些後代。 spec描述了發生這種情況和不發生的所有情況（以及行爲明確未定義的情況）。這裏，以下部是相關的：

注意，文本裝飾不會傳播到浮動和絕對定位的後代，也不原子行內後代的內容如行內塊和內聯的表。

請注意，此傳播與繼承不同，並且是完全獨立的概念;的確，text-decoration: none和text-decoration: inherit不影響的方式傳播你期望他們：

• text-decoration: none僅僅意味着「這個元素有它自己的無文字的裝飾」，並
• text-decoration: inherit意味着「該元素相同的指定值作爲其父項。「

在這兩種情況下，父文本裝飾仍將傳播到適用的元素。您可以強制內嵌塊使用inherit與其父項相同的文字修飾，但而不是父項通過其自己的祖先傳播獲得的任何其他裝飾。

這也意味着僅僅具有display: inline-block就足以防止文本裝飾被傳播。您不需要再指定text-decoration: none - 它已經是初始值。