为什么显示：inline-block;从子元素中删除下划线？

Question

最近我回答了一个问题，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

Answer 1

在某些情况下，文本装饰会从元素传播到某些后代。 spec 描述了这种情况发生和不发生的所有情况（以及行为未明确定义的情况）。在这里，以下部分是相关的：

请注意，文本装饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代的内容，例如内联块和内联表。

请注意，这种传播与继承不同，完全是一个单独的概念；事实上，text-decoration: none 和 text-decoration: inherit 不会像您期望的那样影响传播：

• text-decoration: none 仅表示“此元素没有自己的文本装饰”，并且
• text-decoration: inherit 表示“此元素具有与其父元素相同的指定 text-decoration 值。”

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

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