为什么文本修饰停止基于子元素的定位继承？ [英] Why does text-decoration stop inheriting based on the positioning of the child element?

问题描述

如果我有父级和子级div，并且在父级上设置了 text-decoration：underline ，则这将应用于子div的文本内容。但是，如果我将子div设置为 position：absolute 或 position：fixed ，则文本修饰不再被继承。

我看了一下这个规范，但是我没有看到任何描述这个的东西。大多数地方，例如 MDN ，描述 text-装饰和 text-decoration-line 作为 not 继承，这让我想知道它为什么会有效。也就是说，这种行为在所有浏览器中似乎都是一致的，所以我认为我错过了一些东西。

请参阅下面的代码片段，您可以使用这些按钮来更改子div的位置css：

var positions = ['static' （'id'in positions）{$（'＃buttons'）。append（$（'< input />'）。prop（'type'，'button'，'relative'，'fixed'，'absolute' '）.prop（'value'，positions [idx]））} $（'input'）。click（function（）{$（'＃child'）。css（'position'，this.value）;}）

#parent {text-decoration：underline;}＃buttons {position：绝对; top：30px;}

< script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =parent> < div id =child>样本< / div>< / div>< div id =buttons/>

$ b

解决方案

没错，文字装饰不是继承的。这种特殊行为与继承的CSS定义有些不同（这是的一部分级联）。该规范特别使用传播一词来描述文字装饰的行为，而相反，它与级联无关。特别是，它说：

请注意，文字装饰不会传播到浮动且绝对定位的后代

就本声明而言，固定位置和绝对位置的框被认为是绝对定位的。

文字装饰的传播与继承之间的主要区别在于，与继承一样，后代实际上为自己承担了父母的CSS属性。文字装饰不是这种情况 - 涂在子孙身上的装饰实际上是父母的装饰。您可以通过为父元素和子元素提供不同的前景颜色来看到这一点：

  var position = ['static'，'relative'，'fixed'，'absolute'] for（idx in positions）{$（'＃buttons'）。append（$（'< input / （'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> < / div>< / div>< div id =buttons>< / div>

p>



我回答这个类似的问题探讨了继承关键字如何影响 - 或者说，不影响 - 文本装饰是否传播给某些后代。

If I have parent and child divs and I set text-decoration:underline on the parent, this will apply to the text content of the child div. If however I set the child div to have position:absolute or position:fixed, the text decoration is no longer inherited.

I looked at the spec, but I didn't see anything describing this. Also most places, e.g. MDN, describe text-decoration and text-decoration-line as not inherited, which makes me wonder why it ever works. That said, this behaviour seems to be consistent throughout all browsers so I assume that I'm missing something.

See the code snippet below where you can use the buttons to change the position css of the child div:

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"/>

解决方案

That's right, text decorations are not inherited. This special behavior is somewhat different from the CSS definition of inheritance (which is part of the 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

For the purposes of this statement, both fixed positioned and absolutely positioned boxes are considered absolutely positioned.

The main difference between propagation of text decorations, and inheritance, is that with inheritance, descendants actually take on the parent's CSS properties for themselves. This is not the case with text decorations — the decoration that's painted over the descendants is actually that of the parent. You can see this by giving both the parent and child elements different foreground colors:

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>

My answer to this similar question explores how the inherit keyword affects — or rather, doesn't affect — whether or not text decorations are propagated to certain descendants.

这篇关于为什么文本修饰停止基于子元素的定位继承？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！