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

Question

最近我回答了一个问题，并且OP希望text-decoration: underline;包含在a元素中的整个文本，而不是包含在span内的文本，所以它就像这样< / p>

<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 - 它已经是初始值。