css - テキスト選択の強調表示が多すぎる

Question

テキストの選択パディングが原因で、どちらかの側が強調表示されすぎています。

テキスト選択例

CSSを使用してこれを修正するにはどうすればよいですか？私はたくさんの異なることを試しましたが、どれもうまくいかないようです。（つまり、マージンやその他のプロパティを使用しようとしています）。

私はこの問題に何度か遭遇しましたが、それを理解することはできませんでした。

誰かがこれを修正する方法を教えてくれ、テキスト選択のハイライトがどのように計算されるかを説明してくれたら、とてもありがたいです。

これはFirefox/Operaでは発生していないようです（IEをテストできません）。Webkitベースのブラウザに限定されている可能性があります。

解決済み：

パディングされた要素に追加position: relativeします（これはおそらくWebkitのバグです）。

http://jsfiddle.net/JamesKyle/ejfsM/

score 8 · Accepted Answer

これは奇妙です。ただし、CSSの位置を変更することは機能しているようです。例：

div.sizing-container {
    padding: 75px;
    position: relative;
}

それがあなたの状況で可能かどうかわからない。

score 0 · Accepted Answer

のパディングをdiv.sizing-containerに変更すると、75px 0px 75px 0pxこの問題が修正されます。この要素のパディングのため、ハイライトは非常に大きくなっています。

次に、addを変更する必要があります。

width: 93%;
padding-left: 3%;

体に。次に、10pxのパディングを追加します.sizing-container

それは私のためにそれを修正します。私が言えるのはそれだけです。

2 に答える 2