javascript - CSS : Amazingly strikethrough not working on child display:inline-block div

Question

我有一个代码，如果我在外部 div 上应用 text-decoration: line-through;，所有内部 div 元素也必须是“删除线”。这通常可以 100% 正常工作；但是，如果我将子元素放置为“display:inline-block”，现在应用于父 div 的删除线不会影响子元素的删除线。我必须将 child 作为 display:inline-block 放置，并且我需要在 text-decoration: line-through; 添加到 parent div 时划掉 child 。

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block;}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

这是一个办公元素，感谢您的帮助!

Answer 1

使用text-decoration:inherit。

div{padding:10px;}
#outer{background:yellow;text-decoration: line-through;}
#inner{background:pink;display:inline-block; text-decoration:inherit}

<div id=outer> 
  <div id=inner>
    This is the text 
  </div> 
</div>

通常，text-decoration 不是继承属性，所以内部 div 有一个隐含的 text-decoration:none，默认值。通过使用 inherit，您告诉元素它应该具有与其父级相同的文本装饰。