0

css を使用して、属性 unselectable="on" を持つ要素のテキスト選択 IE 10 をオーバーライドしようとしていますが、次の css ルールは機能していないようです:

-ms-user-select: テキスト !重要;

要素に unselectable="on" がある場合、IE10 は !important があっても CSS オーバーライドを無視します。

ただし、ユーザーが unselectable="on" を使用して要素の「外側」で選択を開始すると、その要素のコンテンツを奇妙に選択できますが、親要素に選択可能なコンテンツがない場合は役に立ちません。 unselectable="on" を持つ要素は事実上選択できません。

これは簡単なテストケースです（IE10用）： http://jsfiddle.net/svysK/

<html><head>
<style> 
.maincontainer, .innercontainer {
  -ms-user-select: text !important;
}
<style></head><body>
<div class="maincontainer">some text<div class="innercontainer" unselectable="on">inner text</div></div>
</body></html>
  • 「内側のテキスト」をクリックしてドラッグします：カーソルは変わりますが、テキストは選択できません（それが私の問題です）。
  • 「一部のテキスト」をクリックしてドラッグ: カーソルが変わり、テキストが選択可能になります。
  • "some text" と "inner text" をクリック & ドラッグ: カーソルが変わり、すべてのテキストが選択可能になります。

この動作に回避策があるかどうか、何か考えはありますか? (可能であれば、javascript を使用して属性値を変更しないでください)

ご清聴ありがとうございました。よろしくお願いします。オリバー

4

1 に答える 1

3

CSS と "!important" は要素のスタイル設定で機能し、属性値をオーバーライドできません。したがって、IE10 はおそらく、「選択不可」という属性があるため、スタイルに関係なく、要素を選択可能にすべきではないと判断します。

おそらくjQueryを使用して、属性を削除する必要があります。

$(".innercontainer").removeAttr("unselectable");
于 2013-05-07T08:17:20.533 に答える