::在浏览器中选择背景颜色和颜色渲染

Question

问题

使用下面只是简单的不正常工作-webkit-和-moz-浏览器:

#exampleElement {
    background-color: red; /* For example */
}

#exampleElement ::selection {
    color: black;
    background-color: white;
}

 

结果:WebKit和Blink驱动的浏览器

在浏览器,Opera和Safari,::selection的background-color呈现,如果它是50%的α,但字体颜色是正确的.

Chrome 29.0.1547.62:

Opera 15.0.1147.130:

Safari 5.34.57.2:

 

结果:支持Gecko的浏览器

在Firefox中,将::selection忽略整个规则.::selection的background-color恰好是白因#exampleElement的黑暗background-color(感谢@BoltClock用于注意到,)

Firefox 22.0:

 

结果:Trident驱动的浏览器

在Internet Explorer中,(你会相信)一切都完美呈现.

Internet Explorer 10.0.9200.16660:

 

这仅仅是这些渲染引擎/浏览器的漏洞还是有-webkit-和-moz-我是不知道的替代品？

我在jsFiddle上保存了一个这样的例子,供大家看看:http://jsfiddle.net/BWGJ2/

Answer 1

根据quirksmode.org，-webkit-selection和-moz-selection确实可用。我刚刚用 Chrome (18) 和 Firefox (13) 测试了它，并且可以确认它可以与 Firefox 一起使用，但我在 Chrome 上没有成功-webkit-selection（它忽略了它），并且根据这个 SO 问题它不存在（答案说这也::selection 应该适用于所有浏览器，但也不适合我）。

正如这个答案中已经提到的，Chrome 强制选择透明，但您可以使用以下方法解决此问题

background:rgba(255, 255, 255, 0.99);

有关更多详细信息，请查看 tw16 的链接答案

此外，这对我在 FF 上有效：

::selection { /* stuff */ }
::-moz-selection { /* stuff */}

但这并不：

::selection, ::-moz-selection { /* stuff */ }

但也许这与所有伪元素无关::selection，但确实适用于所有伪元素，无法找到答案。