从文本装饰级别3规范：
阴影必须绘制在元素的边框和/或背景（如果存在）与元素文本和文本装饰之间的堆栈级别。
也就是说，文本阴影必须在下划线之前绘制，因此下划线将覆盖文本阴影。所以Firefox的渲染是正确的。
这被记录为Chromium Bug Issue 713376: Text shadow should paint behind all text decorations and text.

问题的核心在于每个浏览器如何分层text-decoration（比如下划线）和text-shadow。在你的例子中，Firefox将文本装饰放在阴影的顶部，而Chrome则相反。这并不一定是一个浏览器“错”而另一个“对”的情况。（一般来说，但在这个特定的情况下，这似乎是一个实际的bug in Chrome），而是反映了这样一个事实，即CSS规范可能会留下解释的空间，或者某些方面可能没有明确定义，导致执行上的差异。
为了确保跨浏览器的一致性，而不求助于浏览器检测和条件样式（由于维护问题和浏览器更新的不断变化的性质，通常不建议使用），您可以尝试其他方法：
1.叠加技术：使用额外的元素或伪元素（::before或::after）手动创建下划线效果，这样可以更好地控制分层。
1.基于JavaScript的解决方案：使用JavaScript检测渲染并相应地应用样式。但这可能会很复杂，可能不值得为纯粹的外观问题付出努力。
1.简化：重新设计以避免这种差异。这可能涉及删除text-shadow或text-decoration以在浏览器中保持一致的外观。
下面是第一种方法的示例实现，它在两种浏览器上都是一致的：

.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 */
}

个字符

使用背景而不是文本装饰

.foo {
  font-size: 2em;
  text-shadow: 1px 1px 3px HotPink;
  background: 
   linear-gradient(lightblue 0 0) no-repeat
   left 0 bottom .5ex  /* position */
   / 100% 1ex; /* size */
}

个字符