Почему текстовое оформление перестает наследоваться на основе расположения дочернего элемента?

Если у меня есть родительский и дочерний дивы и я устанавливаю text-decoration:underline на родителя, это будет применяться к текстовому содержимому дочернего дива. Если, Однако, я задаю дочернему div значение position:absolute или position:fixed, Оформление текста больше не наследуется.

Я посмотрел на спецификацию, но не увидел ничего, описывающего это. Кроме того, большинство мест, например MDN , описывают text-decoration и text-decoration-line Как Не унаследованные, что заставляет меня задуматься, почему это вообще работает. Тем не менее, это поведение кажется последовательным во всем все браузеры так что я предполагаю, что я что-то упускаю.

Смотрите фрагмент кода ниже, где вы можете использовать кнопки для изменения позиции css дочернего 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 2
html css inheritance text-decorations

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 влияет - или, скорее, не влияет - распространяется ли текстовое оформление на определенные потомки.

5