为什么 Chrome 和 Edge 在超链接下划线上显示文本阴影？答案

【问题标题】：Why do Chrome and Edge show text-shadow over hyperlink underline?为什么 Chrome 和 Edge 在超链接下划线上显示文本阴影？
【发布时间】：2022-01-14 20:36:42
【问题描述】：

我注意到 Chrome 和 Edge 在超链接上呈现文本阴影的方式有些奇怪。

例如，我有一种情况，我将两个文本阴影应用于多个段落元素。其中一段只是带有text-decoration: underline; 的标准超链接。这是 HTML 和 CSS：

<p class="header__text">
    <a href="https://google.com">See the 2021 edition ...</a>
</p>

.header__text {
    color: #fff;
    text-shadow: 2px 2px 2px #000, 1px 1px 24px #000;
    padding-left: 16px;
    padding-right: 16px;
}
a {
    color: #c62828;
}

这呈现了我在 Safari 和 Firefox（Mac 和 PC）中所期望的方式，阴影完全位于文本和下划线下方。

但在 Chrome（Mac 和 PC）和 Edge 中，文本阴影位于文本下方，但超过超链接的下划线。

我不明白为什么阴影在这两个浏览器中的行为是这样的。这只是一个错误吗？我应该重写一些特定于 Blink 的属性来阻止这种行为吗？

【问题讨论】：

标签： html css google-chrome hyperlink text-shadow

【解决方案1】：

根据我的阅读，下划线应该是第一个被绘制的。如果我的阅读正确，那就是接下来的内容，似乎是text-shadow。

来自https://drafts.csswg.org/css-text-decor/#painting-order的绘画顺序是：

与 [CSS2] 中一样，文本装饰立即绘制在它们装饰的文本上方/下方，在以下顺序（最下端优先）：

阴影（文本阴影）

下划线（文本装饰）

上划线（文本装饰）

文字

强调标记（文本强调）

直通（文本装饰）

也就是说，阴影似乎应该被下划线覆盖，但 Chrome (Edge) 并没有遵循这一点。

【讨论】：