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

最近我回答了一个问题,OP想要文字装饰：下划线;对于包裹在一个元素内的整个文本,而不是包含在span内部的文本,所以它就是这样的

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

所以简单地给予

span {
   text-decoration: none;
}

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

但这确实删除了下划线

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

所以我使跨度成为内联块并且它起作用,这就是我通常这样做的方式.但是当谈到解释时,我无法解释为什么这样做实际上删除了简单地使用text-decoration的下划线：none;没有.

Demo

解决方法

在某些情况下,文本装饰从元素传播到某些后代. spec描述了发生这种情况并且没有发生的所有情况(以及行为明确未定义的情况).这里,以下部分是相关的：

Note that text decorations are not propagated to floating and absolutely positioned descendants,nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

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

> text-decoration：none只是表示“此元素没有自己的文本装饰”,和
> text-decoration：inherit表示“此元素与其父元素具有相同的指定文本修饰值”.

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

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