0

I experience the same strange issue with every major browser: an element gets styled with two text-decoration properties.

text-decoration

The first decoration comes from the parent element, the second one – from the element itself. Here's the relevant HTML:

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

How to override the first declaration, not add to it?

4

1 回答 1

5

您看到的是父元素上的文本装饰被应用到子元素中的文本，因为子元素中的文本也被认为是父元素中文本的一部分。有关详细信息，请参阅规范。

目前没有办法在保持文本流动的同时取消子元素的父文本装饰。您可以浮动或绝对定位子元素，或使其成为内联块，但这会改变布局。如果这不是可取的，则必须找到一种方法将父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>
于 2013-06-19T14:30:30.380 回答