::選択が一部の行をスキップしています

Question

これはJSFiddleです。テキストを選択しようとすると、その一部が正しい色で表示され、残りはカスタムの青です。

::selection {background-color: #FF6347; color: #fff;} 
::-moz-selection{background-color: #FF6347; color: #fff;} 

これを修正する方法はありますか。

Safari 9.1でテスト済みです。

---

クローム：

サファリ：

Answer 1

事は、ある要素がクロームとSafariをサポートしているといくつかの問題を抱えている::選択。

https://developer.mozilla.org/en-US/docs/Web/CSS/%3a%3aselection

は..それあなたがスパンまたはそのような段落の間、あなたのコードをラップする必要がクロム/ Safariで少し見やすく

https://jsfiddle.net/akrm7uaL/8/

見ての通りを作成するにはテキストはdivまたはspanにラップされ、選択されるとすべてのテキストが赤になります。残念ながら、コード内に新しいdivを配置すると、ブラウザはテキスト間のスペースをサポートしません。あなたの代わりにdiv要素のスパンですべてのテキストを配置し、このような1つのdivの間に配置する必要があり、これを解決するために...

<div><span class="circular"></span></div> <!-- instead of --> <div><div class="circular"></div></div> 

https://jsfiddle.net/akrm7uaL/11/

を私はあなたのコードを見ると、私はあなたが使用したとしあなたのコードにidを追加しなければならない場合は、完全にあなたのケースではないでしょう。