css - Chrome: テキストのみの強調表示

Question

こんな質問をしているなんて信じられませんが、コンテンツを強調表示するときに Chrome を IE のように機能させる方法はありますか? 複数の要素を左から右に単純にドラッグすると、Chrome は IE のようにテキストのみではなく要素の一部または全体を強調表示することを好むようです。

クロムの強調表示:

ここに画像の説明を入力

IE ハイライト:

ここに画像の説明を入力

私は使用してみました：

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

SO answer hereで提案されているように、すべての強調表示を無効にしました。次に、調べたところ、ではなくオプションuser-selectがあることがわかりました。それで、それを適用しましたが、と同じ効果がありました。textnonenone

また、、、などの特定の一般的なテキストタグにnone設定を適用し*、選択的に適用しようとしましたが、それでも同じように動作しました。textspanph1

利用可能な CSS ルールはありますか、それとも Chrome が機能するのはこれだけですか?

アップデート

paddingを多用するため、コンテンツを相殺する必要があります。:hoverこれにより、要素のヒット領域が大幅に増加しますが、増加marginしません。

score 3 · Accepted Answer

本当にパディングを保持したい場合は、子要素を使用してください。

score 2 · Accepted Answer

div.box垂直パディングの代わりにマージンを使用します。

.box {
    margin:20px 0;
    width: 100px;
    padding: 0 40px;
}

2 に答える 2