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

问题

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

回答1:

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.

来源：https://stackoverflow.com/questions/39491007/why-does-text-decoration-stop-inheriting-based-on-the-positioning-of-the-child-e

标签

html

css

inheritance

text-decorations