html - 为什么显示: inline-block; remove an underline from a child element?

最近，我回答了一个问题，OP希望将text-decoration: underline;包裹在a元素中的整个文本，而不是包裹在span里面的文本，所以就像这样

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

所以简单地给

span {
   text-decoration: none;
}

不会删除包裹在span元素内的文本的下划线

但这确实消除了下划线

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

因此，我将span设置为inline-block并成功了，这就是我通常的做法。但是，当涉及到解释时，我无法解释为什么这样做实际上会删除下划线，而仅仅使用text-decoration: none;却没有。

Demo

最佳答案

在某些情况下，文本修饰从元素传播到某些后代。 spec描述了发生和不发生的所有情况(以及行为未明确定义的情况)。在此，以下部分是相关的:



请注意，这种传播与继承不同，并且完全是一个单独的概念。实际上，text-decoration: none和text-decoration: inherit不会以您期望的方式影响传播:

text-decoration: none的简单含义是“此元素本身没有文字修饰”，而

text-decoration: inherit的意思是“此元素与其父元素具有相同的指定text-decoration值。”

在这两种情况下，父文本修饰仍将在适用的情况下传播到该元素。您可以使用inherit强制内联块具有与父代相同的文本修饰，但不能强制父代通过从其祖先传播而获得的任何其他修饰。

这也意味着仅拥有display: inline-block就足以防止文本装饰传播。您无需再次指定text-decoration: none-它已经是初始值。