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

Question

此 HTML/CSS 在 Firefox 和 Chrome 中的呈现方式不同 —

text-decoration

和

text-shadow

的分层被交换。

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

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

以下是截图：

火狐

铬

这是怎么回事？是否有一种浏览器错误地执行了该标准？是否可以在不检测浏览器和样式的情况下编写 CSS 以确保一致性？

Answer 1

问题的核心在于每个浏览器如何分层

text-decoration

（如下划线）和

text-shadow

。在你的例子中，Firefox 将文本装饰放在阴影之上，而 Chrome 则相反。这并不一定是一个浏览器“错误”而另一个浏览器“正确”的情况，而是反映了 CSS 规范可能留有解释空间，或者某些方面可能没有明确定义，从而导致实施上的差异。

为了确保跨浏览器的一致性，而不诉诸浏览器检测和条件样式（由于维护问题和浏览器更新不断发展的性质，通常不建议这样做），您可以尝试其他方法：

1. 叠加技术：使用附加元素或伪元素（

   ::before

   或

   ::after

   ）手动创建下划线效果。这使您可以更好地控制分层。

2. 基于JavaScript的解决方案：使用JavaScript来检测渲染并相应地应用样式。然而，这可能很复杂，并且可能不值得为了纯粹的外观问题而付出努力。

3. 简化：简化设计以避免此类差异。这可能涉及删除

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

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