两个浏览器显示两种不同的文本高亮颜色答案

【问题标题】：Two browsers showing two different text highlight colours两个浏览器显示两种不同的文本高亮颜色
【发布时间】：2021-06-01 13:48:32
【问题描述】：

我只是在自定义网站的某些部分，并决定更改突出显示的颜色。在 Brave 浏览器（基于 Chromium）中，颜色被视为预期的颜色，但我随后在 Safari 上检查了颜色看起来不同的地方。
这是我的 CSS 中的代码 sn-p：

::selection {
    color: black;
    background-color: #aaaaff;
}
::-moz-selection {
    color: black;
    background-color: #aaaaff;
}

提供了详细说明差异的图片。
勇敢的浏览器（正确）

野生动物园

有谁知道为什么会发生这种情况以及如何解决它以使所有浏览器上的突出显示颜色都相同？

【问题讨论】：

我相信要使选择颜色在所有浏览器中始终如一地工作，您需要对颜色使用轻微的不透明度。类似rgba(100, 100, 255, 0.9)
具有讽刺意味的是，Chromium 曾经有过这个问题10 years ago - 但那是在 Blink 分叉发生之前。不过，不是说这就是原因。但是考虑到 ::selection 的行为现在在 css-pseudo-4 中得到了很好的定义，在 Safari 中看到这一点感到很惊讶。我的猜测是 Safari 错误地将此效果应用于突出显示的文本，而规范说它应该只应用于突出显示的替换元素（例如图像）。
@Dominik：是的，0.99 也可以。请参阅我刚刚链接到的问题。
感谢大家的回答。 @BoltClock 这个解决方案（定义不透明度

标签： html css

【解决方案1】：

要在 Safari 浏览器中工作，您需要添加一点不透明度。您可以添加 rgba 或 hsla，而不是十六进制代码。它工作正常，我在 Safari 中检查过！如果将不透明度设置为 100%，它不起作用，但在 99% 时它可以正常工作。

RGBA 颜色：

::selection {
  color: black;  
  background-color: rgb(168 168 255 / 99%);
}
::-moz-selection {
  color: black;  
  background-color: rgb(168 168 255 / 99%);
}

HSLA 颜色：

::selection {
  color: black;
  background-color: hsl(240deg 100% 83% / 99%);
}
::-moz-selection {
  color: black;
  background-color: hsl(240deg 100% 83% / 99%);
}

【讨论】：