html – 为什么显示:inline-block;从子元素中删除下划线?

前端之家收集整理的这篇文章主要介绍了html – 为什么显示:inline-block;从子元素中删除下划线?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近我回答了一个问题,OP想要文字装饰:下划线;对于包裹在一个元素内的整个文本,而不是包含在span内部的文本,所以它就是这样的 @H_403_2@<a href="#"><span>Not Underline</span>Should Be Underlined</a>

所以简单地给予

@H_403_2@span { text-decoration: none; }

不会删除包含在span元素内的文本的下划线

但这确实删除了下划线

@H_403_2@span { text-decoration: none; display: inline-block; }

所以我使跨度成为内联块并且它起作用,这就是我通常这样做的方式.但是当谈到解释时,我无法解释为什么这样做实际上删除了简单地使用text-decoration的下划线:none;没有.

Demo

解决方法

在某些情况下,文本装饰从元素传播到某些后代. spec描述了发生这种情况并且没有发生的所有情况(以及行为明确未定义的情况).这里,以下部分是相关的:

Note that text decorations are not propagated to floating and absolutely positioned descendants,nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

请注意,此传播与继承不同,并且完全是一个单独的概念;实际上,text-decoration:none和text-decoration:inherit不会以你期望的方式影响传播:

> text-decoration:none只是表示“此元素没有自己的文本装饰”,和
> text-decoration:inherit表示“此元素与其父元素具有相同的指定文本修饰值”.

在这两种情况下,父文本装饰仍将传播到适用的元素.您可以强制内联块使用继承具有与其父级相同的文本修饰,但不能强制父级通过其祖先传播获得的任何其他装饰.

这也意味着只需显示:inline-block就足以防止文本装饰被传播.您不需要再指定text-decoration:none – 它已经是初始值.

原文链接:https://www.f2er.com/html/231822.html

猜你在找的HTML相关文章