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

Question

我只是在自定义网站的某些部分，并决定更改突出显示的颜色。在 Brave Browser(基于 Chromium)中，颜色被认为是预期的，但我随后在 Safari 上检查了颜色看起来不同的地方。
这是我的 CSS 中的代码片段:

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

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

Safari

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

Answer 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%);
}