Firefox与Chrome中text-decoration和text-shadow的层级优先级差异

问题描述 #

以下CSS和HTML代码在Firefox和Chrome中渲染时，text-decoration（下划线）与text-shadow（文本阴影）的层级顺序出现颠倒：

CSS代码 #

.foo {
    font-size:2em;
    text-decoration:underline LightBlue 1ex; 
    text-decoration-skip-ink:none; 
    text-underline-offset:-1ex; 
    text-shadow: 1px 1px 3px HotPink;
}

HTML代码 #

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

渲染差异：

• Firefox：下划线显示在文本阴影的上方
• Chrome：文本阴影显示在下划线的上方

原因分析 #

早期CSS规范并未明确界定text-decoration与text-shadow的绘制层级顺序，导致不同浏览器厂商采用了不同的实现逻辑。后来CSS Text Decoration Module Level 4规范明确规定：text-shadow应当绘制在text-decoration的下方，但Chrome目前仍未跟进这一标准更新，而Firefox已经按照新标准完成了实现。

是否存在浏览器不符合标准？ #

是的，Chrome当前的实现不符合最新的CSS规范，Firefox的渲染逻辑是符合新标准要求的。

跨浏览器一致性解决方案（无需浏览器检测） #

可以通过伪元素模拟下划线的方式，主动控制层级关系，实现跨浏览器一致的渲染效果：

.foo {
    font-size: 2em;
    text-shadow: 1px 1px 3px HotPink;
    position: relative;
}
.foo::after {
    content: "";
    position: absolute;
    bottom: -1ex; /* 对应原text-underline-offset的偏移值 */
    left: 0;
    right: 0;
    height: 1ex; /* 对应原下划线的厚度 */
    background-color: LightBlue;
    z-index: -1; /* 让下划线位于阴影下方，若要在上层可改为1 */
}

这种方法通过自定义下划线替代原生text-decoration，利用z-index直接控制层级，完全不受浏览器原生实现差异的影响。

内容的提问来源于stack exchange，提问作者Mike Pierce