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 posi

Solution 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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="parent"><divid="child">
    Sample
  </div></div><divid="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.