Firefox和Chrome堅持使用藍色::選擇背景

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會看像這樣：

出人意料的是，互聯網瀏覽器（11）是這樣做是正確的一個：

有沒有一種方法，使整個選擇即橙色或白色/透明在上面的例子適用於Chrome和Firefox？

Answer 1

Chrome和家族的問題（如小哥哥Opera，沒有檢查表親Safari）是::selection不適用於通過在塊元素之前添加文本節點創建的隱式塊包裝。這甚至可以看到沒有圖像：

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

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

結果看起來像這樣在Chrome後，按Ctrl + A：

這正是發生在這些圖像。看到這個例子：

::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>

在p像包裹img年代後，我們有這個在Chrome：

火狐仍是一個謎。如果不是因爲我之前對CSS的可能性感到困惑（而瀏覽器有時會有像-webkit-appearance這樣的東西讓我感到困惑），我會選擇「不可能用CSS」。如果不這樣做，應該可以用JavaScript來做到這一點，不知何故。使用CSS filter s對圖像進行着色是最困難的部分。