父元素设置display:flex时子元素text-decoration:none不生效该如何解决？

text-decoration 的渲染规则和普通可继承属性存在本质区别：父元素设置的文本装饰会直接绘制在父容器的整个内容层上方，覆盖所有子元素的文本区域，并非通过继承属性传递给子元素。给子元素设置text-decoration: none仅能取消子元素自身生成的文本装饰，无法清除父元素已经绘制在子元素上层的装饰线。
该现象和父元素为flex容器无直接关联，普通块级父元素设置text-decoration: line-through时，子元素设置text-decoration: none同样不会生效。

• 最优方案：不要给整个flex父容器添加text-decoration属性，将父容器内需要添加删除线的文本单独用标签包裹，仅给对应标签设置line-through样式。
  示例代码如下：

<div class="parent">
  <span class="del-text">需要展示删除线的文本内容</span>
  <button>Click</button>
</div>

.parent {
  width: 600px;
  margin: 40px auto;
  background-color: #333;
  color: white;
  padding: 10px;
  display: flex;
  font-size: 1.3rem;
  justify-content: space-between;
}
.del-text {
  text-decoration: line-through;
}

• 方案二：如果无法修改HTML结构，必须给父元素设置text-decoration，可给按钮添加和父元素一致的不透明背景，覆盖父元素绘制的装饰线：

.parent button {
  background-color: #333;
  border: 1px solid #fff;
  color: #fff;
  padding: 2px 8px;
}

• 方案三：需要按钮保持透明背景的场景下，可给按钮设置display: inline-block配合transform: translateZ(0)触发独立层叠上下文，规避父元素装饰线的覆盖：

.parent button {
  display: inline-block;
  transform: translateZ(0);
  text-decoration: none;
}

内容的提问来源于stack exchange，提问作者Zaher-aa