为什么文本修饰会根据子元素的位置停止继承？

Question

如果我有父节点和子节点并且我text-decoration:underline在父节点上设置,则这将适用于子节点的文本内容.但是,如果我将子div设置为position:absolute或position:fixed,则不再继承文本修饰.

我查看了规范,但我没有看到任何描述这个的东西.而且大多数地方,例如MDN,描述text-decoration和 text-decoration-line作为不继承,这使我想知道为什么它曾经工作.也就是说,这种行为似乎在所有浏览器中都是一致的,所以我认为我错过了一些东西.

请参阅下面的代码片段,您可以使用这些按钮更改子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定义(它是级联的一部分)有些不同.该规范专门使用"传播"一词来描述文本装饰的行为,相反,它与级联无关.特别是,它说:

请注意,文本修饰不会传播到浮动和绝对定位的后代

出于本声明的目的,固定定位和绝对定位的盒子被认为是绝对定位的.

文本修饰的传播和继承之间的主要区别在于,对于继承,后代实际上为自己采用父的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>

我对这个类似问题的回答探讨了inherit关键字如何影响 - 或者更确切地说,不影响 - 文本装饰是否传播到某些后代.