11

最近我回答了一个问题，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;没有的下划线。

演示

4

1 回答 1

14

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

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

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

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

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

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

于 2012-12-13T10:31:28.117 回答