为什么显示: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;.

演示

Answer 1

在某些情况下,文本装饰从元素传播到某些后代.该规范描述了所有在此发生,(其中的行为是明确的不确定以及例)不会发生的情况.这里,以下部分是相关的:

请注意,文本修饰不会传播到浮动和绝对定位的后代,也不会传播到原子内联级后代(如内联块和内联表)的内容.

请注意,此传播与继承不同,并且完全是一个单独的概念; 确实,text-decoration: none并且text-decoration: inherit不会以您期望的方式影响传播:

• text-decoration: none 只是意味着"这个元素没有自己的文字装饰",并且
• text-decoration: inherit表示"此元素与text-decoration其父元素具有相同的指定值".

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

这也意味着只display: inline-block需要足以防止文本装饰传播.您不需要text-decoration: none再次指定- 它已经是初始值.