5

問題

-webkit-以下を使用すると、-moz-ブラウザーでは正しく機能しません。

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

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

 

結果: WebKit および Blink を搭載したブラウザー

Chrome、Opera、および Safari では、は 50% のアルファであるか::selectionのbackground-colorようにレンダリングされますが、フォントの色は正しいです。

クロム 29.0.1547.62:
クロム 29.0.1547.62

オペラ 15.0.1147.130:
オペラ 15.0.1147.130

サファリ 5.34.57.2:
サファリ 5.34.57.2

 

結果: Gecko を搭載したブラウザ

::selectionFirefox では、ルール全体が無視されます。は暗いためにたまたま白くなっています::selection（それに気付いてくれた@BoltClockに感謝します）background-color#exampleElementbackground-color

Firefox 22.0:
Firefox 22.0

 

結果: Trident を搭載したブラウザー

Internet Explorer では、(信じられますか) すべてが完全にレンダリングされます。

Internet Explorer 10.0.9200.16660:
インターネット エクスプローラー 10.0.9200.16660

 

これはこれらのレンダリング エンジン/ブラウザの単なる欠陥ですか、それとも私が認識していない代替手段が-webkit-ありますか?-moz-

人々が見られるように、この例をjsFiddleに保存しました：http://jsfiddle.net/BWGJ2/

4

2 に答える 2

4

quirksmode.orgによる-webkit-selectionと-moz-selection、実際に利用可能です。Chrome (18) と Firefox (13) でテストしたところ、Firefox で動作することを確認できましたが-webkit-selection、Chrome では成功しませんでした (無視されました)。この SO の質問によると、存在しません。 （そして答えは、それはすべてのブラウザでも動作する::selection はずですが、私にはそうではありません）.

この回答で既に述べたように、Chrome は選択を強制的に透明にしますが、これを回避するには

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

詳細については、tw16 によるリンクされた回答を確認してください。

さらに、これはFFで機能します：

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

しかし、これはしません:

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

しかし、これは関連して::selectionいないかもしれませんが、すべての疑似要素に適用され、それに対する答えが見つかりませんでした.

于 2012-06-17T23:43:26.897 に答える
0

ブラウザ依存のバージョンがあります。使用しているバージョンは標準の CSS3 の方法でしたが、仕様から削除されました。ブラウザのサポートについてはわかりません...

その他の考慮事項: ID ベースの CSS セレクターは疑似クラスベースのセレクターよりも「重要」であり、その結果、ID ベースの CSS が常に優先されます。したがって、スタイルに追加!importantして、該当する場合に常に使用されるようにしてください。::selection

それが役立つことを願っています!

于 2012-06-17T23:25:53.543 に答える