CSSテキスト選択カーソルIE7、奇妙な動作

StackOverflow https://stackoverflow.com/questions/1621132

  •  06-07-2019
  •  | 
  •  

質問

不思議なことに、フィードバックを受け取って正しい方向に向けてほしいと思っています。

私の #wrapper またはいずれかの子divに背景色が適用されていない場合、ie7は通常の「ポインター」を変更します。 「テキスト選択」にカーソルを合わせますページ上をマウスで移動するときのカーソル（テキスト上でのマウス移動かどうか）。

しばらく前に問題を修正したと思っていましたが、 #wrapper または子divからbackground-colorを削除すると、問題が再発します。

ヒントまたは確認する必要があるものを探しています。

#wrapper {
    overflow: hidden;
    margin: 0 auto;
    width: 960px; /* using 960.gs */
}

#children {
    display: inline;
    float: left;
    margin: 0 10px;
    width: 940px;
}

編集：

divが「hasLayout」だからと思われますが、それを修正する方法がまだわかりません。 このリンク

をご覧ください。

編集2：

この＆quot; ie7バグ＆quot;に関する情報はこれ以上見つかりません。アイデアを持っている人、またはこのバグを知っていて、私に知らせてくれる人なら誰でも、私は狂っていないことを知っています。マイクロソフトに再び不満を感じています。今週はすでに数時間余分に仕事をしていました。終わらないようです。

編集3：

別のリンク同じ問題を抱えている人のことです。

編集4：

STACKOVERFLOW.com には、このバグがあります！ mashable.com も同様です。多くのウェブ開発者が自分のサイトにこのバグを抱えていることを保証します。彼らはそれを知りさえしません。

自分で確認してください...いずれかのサイトのページにカーソルを合わせてください。すべきではないときにテキスト選択カーソルに変わることに注意してください。

cursor プロパティで簡単に修正できるように見えますが、問題は必要なときに適切なtext-select-cursor動作をトリガーすることです。

役に立ちましたか？

解決

どのカーソルをどこに移動すべきかを明示的に述べるのはあまりにもハッキングですか？

html {
    cursor: default;
}

h1, h2, h3, h4, h5, h6,
p, li, label, td, th {
    cursor: text;
}

a:link, a:visited, a:hover, a:active {
    cursor: pointer;
}

etc ..

他のヒント

以前に遭遇したことは確かですが、表面的なブラウザのテスト中に実際に気付くにはおそらくあまりにも微妙です。しかし、背景色を設定することで問題が修正されたことは確かです。

私が知る限り、それを修正する最善の方法は、問題の原因となっている要素を配置するか、配置されたラッパーdivをその周りに追加することです。おそらく position：relative を使用しますが、 absolute および fixed も機能するはずです。

要素自体の配置は通常機能しますが、ラッパーdivの追加はより一貫して機能する可能性があります。

E.g。 position：relative を .post-text クラスに追加すると、このページの質問と回答にカーソルが固定されます。

透明な1x1 px GIFは動作し、これとIE 6〜8のその他のバグ。すべてのIEの条件付きコメントに次のようなものを追加します。

* {
    background: url('images/fix1.gif');
}

background-color：transparent; を明示的に設定しようとしましたか？それは役立ちますか？

これはいハックのように聞こえるかもしれませんが、背景として透明な1x1ピクセルのGIF（別名スペーサー）を設定しようとしましたか？

これは完全ではありませんが、この小さな例ではIE 7で機能するようです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div style="overflow: hidden; margin: 0 auto; width: 140px;">
   <div style="position: relative; display: inline;">
      <p>
         Here is some test text that will wrap.
      </p>
   </div>
</div>
</body>
</html>

これがなぜ機能するように見えるのかわかりませんが、それは確かに理想的ではありません。何らかの理由で、インラインで相対的に配置されたdivにp要素を配置すると、マウスカーソルの動作が期待どおりになります。

要素の階層がある場合でも、これがより広い意味で機能するかどうかはわかりません。

これは完璧な答えではないことは承知していますが、他のアイデアに拍車をかけるかもしれません。

Delilahのソリューションは、ほんの少し単純化しただけで私にとってはうまく機能し、メルカトルの問題も解決します。

div { cursor: default; }
div * { cursor: auto; }

問題は、別のcssファイルを作成し、他のブラウザーを妨げないように条件付きコメントを使用して対処する必要があることです。

PS：この問題は、暗い背景のWebサイトでは非常に迷惑になります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top