为什么 text-decoration 停止基于 child 元素的定位继承？

Question

如果我有 parent 和 child div 并且我在 parent 上设置了 text-decoration:underline，这将应用于childdiv。但是，如果我将 child div 设置为 position:absolute 或 position:fixed，则不再继承文本装饰。

我查看了规范，但没有看到任何对此进行描述的内容。还有大多数地方，例如MDN，将 text-decoration 和 text-decoration-line 描述为 not 继承，这让我想知道为什么它会起作用。也就是说，这种行为似乎在所有浏览器中都是一致的，所以我认为我遗漏了一些东西。

请参阅下面的代码片段，您可以在其中使用按钮更改 child div 的位置 css：

var positions = ['static','relative','fixed', 'absolute']


for(idx in positions){
    $('#buttons').append($('<input/>').prop('type','button').prop('value',positions[idx]))
}

$('input').click(function(){
    $('#child').css('position',this.value);
})

#parent{
  text-decoration:underline;
}
#buttons{
  position:absolute;
  top:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    Sample
  </div>
</div>

<div id="buttons"/>

Answer 1

没错，文本装饰不是继承的。这种特殊行为与继承的 CSS 定义有些不同（它是 cascade). The spec specifically uses the word "propagate" instead to describe the behavior of text decorations, which on the contrary has nothing to do with the cascade. In particular, it says:

的一部分

Note that text decorations are not propagated to floating and absolutely positioned descendants

为了本声明的目的，固定定位和绝对定位的盒子都被认为是绝对定位的。

文本装饰传播与继承之间的主要区别在于，通过继承，后代实际上会为自己继承父代的 CSS 属性。文本装饰不是这种情况——绘制在后代上的装饰实际上是父代的装饰。您可以通过为父元素和子元素提供不同的前景色来看到这一点：

var positions = ['static','relative','fixed', 'absolute']


for(idx in positions){
    $('#buttons').append($('<input/>').prop('type','button').prop('value',positions[idx]))
}

$('input').click(function(){
    $('#child').css('position',this.value);
})

#parent{
  text-decoration:underline;
  color:red;
}
#child{
  color:blue;
}
#buttons{
  position:absolute;
  top:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">
    Sample
  </div>
</div>

<div id="buttons"></div>

我对 this similar question 的回答探讨了 inherit 关键字如何影响——或者更确切地说，不影响——文本装饰是否传播到某些后代。

为什么 text-decoration 停止基于 child 元素的定位继承？

Why does text-decoration stop inheriting based on the positioning of the child element?

html

css

inheritance

text-decorations