为什么display:inline-block会移除子元素的下划线？

Question

11

最近我回答了一个问题，提问者希望对包含在 a 元素内的整个文本应用 text-decoration: underline;，但不包括被 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;则不能。

- Mr. Alien

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

文本装饰会在某些情况下从父元素向特定后代传播。规范描述了所有发生和不发生（以及行为明确未定义的情况）的情况。这里，以下内容是相关的：

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

请注意，此传播与继承不同，是完全独立的概念；事实上，text-decoration: none 和 text-decoration: inherit 并不会按您期望的方式影响传播：

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

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