html - Firefox 和 Chrome 坚持使用 blue::selection 背景

Question

我无法让 Chrome (41) 和 Firefox (36) 将特定颜色应用到整个选择背景，尽管指定了橙色背景，但有些区域仍然是蓝色。

考虑以下示例:

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

img::selection
{
  background: rgba(255, 127, 0, 0.8);
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

当按下 Ctrl+A 时，Chrome(和 Opera)将如下所示:

Firefox 看起来像这样:

令人惊讶的是，Internet Explorer (11) 是正确的:

在上面的 Chrome 和 Firefox 示例中，有没有办法使整个选择成为橙色或白色/透明？

Answer 1

Chrome 和家庭(像小兄弟 Opera，没有检查表弟 Safari)的问题是 ::selection 不适用于通过在 a 之前添加文本节点创建的隐式 block 包装器 block 元素。即使没有图像也可以看到:

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

<p>Chrome loves you.</p>
Chrome hates you.
<p>Chrome is tsundere.</p>

按 Ctrl+A 后在 Chrome 上的结果如下所示:

这正是那些图像所发生的事情。看这个例子:

::selection
{
  background: rgba(255, 127, 0, 0.996);
  color: white;
}

::-moz-selection
{
  background: #F80;
  color: white;
}

img::selection
{
  background: rgba(255, 127, 0, 0.8);
  color: white;
}

<p>The domestic cat is a small, usually furry, domesticated, and carnivorous mammal. They are often called a housecat when kept as an indoor pet, or simply a cat when there is no need to distinguish them from other felids and felines. Cats are often valued by humans for companionship.</p>
<p>
    <img src="http://placekitten.com/g/75/300">
    <img src="http://placekitten.com/g/300/300">
    <img src="http://placekitten.com/g/150/300">
</p>
<p>A Melvin, Michigan woman was brutally attacked by a stray cat and shocking footage of the mauling has already gained a million views on YouTube.</p>
<p>The woman, who identified herself to reporters only as Maxx, endured the horrific attack November 30 but only recently realized it had been caught on her home surveillance camera.</p>
<p>The attack left her face swollen and infected and the cat named Buddy dead as officials were forced to test it for rabies.</p>

像这样将 img 包装在 p 中之后，我们在 Chrome 上有这个:

Firefox 仍然是个谜。如果不是因为我之前对 CSS 的可能性感到困惑(并且浏览器有时会有像 -webkit-appearance 这样的东西，我会选择“不可能的 CSS”我)。如果做不到这一点，应该可以用 javascript 以某种方式做到这一点。使用 CSS filter 可以为图像着色，这是最难的部分。