Firefox与Chrome中文本装饰和文本阴影的不同优先级

问题的核心在于每个浏览器如何分层 text-decoration (如下划线)和 text-shadow 。在你的例子中,Firefox将文本装饰放在阴影之上,而Chrome则相反。这不一定是一个浏览器“错误”而另一个浏览器是“正确”的情况(一般来说,但在这种情况下 specific case 这似乎是一个实际的 bug in Chrome ),而是反映了这样一个事实,即CSS规范可能会留下解释的空间,或者某些方面 可能未明确定义 ,导致了执行方面的差异。

为了确保浏览器之间的一致性,而不必求助于浏览器检测和条件样式(由于维护问题和浏览器更新的不断发展的性质,通常不建议这样做),您可以尝试其他方法:

1. 叠加技术 :使用附加元素或伪元素( ::before 或 ::after )以手动创建下划线效果。这让你可以更好地控制层次感。

2. 基于JavaScript的解决方案 :使用JavaScript检测渲染并相应地应用样式。然而,这可能很复杂,可能不值得为纯粹的美容问题付出努力。

3. 简化 :简化设计以避免此类差异。这可能涉及删除 文本阴影 或者 文字装饰 以在浏览器之间保持一致的外观。

以下是第一种方法的示例实现,它在两种浏览器上都是一致的:

.custom-underline {
    position: relative;
    font-size: 2em;
    text-shadow: 1px 1px 3px HotPink;
}

.custom-underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.5ex; /* Adjust as needed */
    border-bottom: 1ex solid LightBlue; /* This creates the underline */
    z-index: -1; /* Puts the underline behind the text */
}

<span class="custom-underline">Gaze upon this text in Firefox and Chrome.</span>

来自 Text-decoration Level 3 规范:

阴影必须在元素边界和/或背景(如果存在)与元素文本和文本装饰之间的堆栈级别绘制。

也就是说,文本阴影必须绘制在下划线之前,因此下划线将覆盖文本阴影。所以Firefox的渲染是正确的。

这被记录为Chromium Bug Issue 713376: Text shadow should paint behind all text decorations and text.