在单个元素上继承多个文本装饰

Question

我遇到了与每个主要浏览器相同的奇怪问题:一个元素使用两个text-decoration属性进行样式设置.

第一个装饰来自父元素,第二个装饰来自元素本身.这是相关的HTML:

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
</div>

如何覆盖第一个声明,而不是添加它？

Answer 1

您所看到的是父项上的文本修饰应用于子元素中的文本,因为子项中的文本也被视为父项中文本的一部分.有关详细信息,请参阅规格

目前无法在保持文本流的同时取消子项上的父文本修饰.您可以浮动或绝对定位子元素,或使其成为内联块,但这会改变布局.如果这不可取,您将必须找到一种方法将父text-decoration样式移动到父元素中的子元素的兄弟节点.如果父元素中有裸文本,则表示您需要将其包装在兄弟元素中.例如,如果你有这个额外的文字:

<div style="text-decoration: underline">
    <span style="text-decoration: line-through">Hello</span>
    world
</div>

你需要包装它,并相应地移动声明:

<div>
    <span style="text-decoration: line-through">Hello</span>
    <span style="text-decoration: underline">world</span>
</div>