CSS text-select Cursor IE7, seltsames Verhalten

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

  •  06-07-2019
  •  | 
  •  

Frage

Seltsame man hier, in der Hoffnung ein Feedback, um mich in der richtigen Richtung zu zeigen.

Wenn mein #wrapper oder eines der Kind divs auf sie angewendet keinen Hintergrund-Farbe haben, IE7 ändert den normalen „Zeiger“ Cursor in einen „text-select“ Cursor, wenn sie um die Seite mousing (ob Text mousing über oder nicht).

Ich dachte, ich das Problem vor einiger Zeit festgelegt hatte, aber wenn ich die Hintergrundfarbe von meinem #wrapper oder eines der Kinder divs zu entfernen, erscheint wieder das Problem.

Einfach mal für einige Tipps oder was soll ich überprüft werden. 

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

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

EDIT:

Es scheint zu sein, weil die divs „hasLayout“, aber ich bin immer noch nicht sicher, wie es zu beheben. Siehe diesen Link.

EDIT 2:

Ich kann keine weiteren Informationen über diese finden „IE7 Bug.“ Jeder, der eine Idee hat, oder auch wenn Sie diesen Fehler bewusst ist, und kann mich nur so wissen lassen, ich weiß, ich bin nicht verrückt. Ich erhalte wirklich frustriert mit Microsoft wieder. Bereits kostete mich eine extra paar Stunden Arbeit in dieser Woche. Scheint, wie es nie endet.

EDIT 3:

Hier ist ein weiterer Link von jemandem mit dem gleichen Problem.

EDIT 4:

STACKOVERFLOW.com leidet unter dieser Fehler! Das Gleiche gilt für mashable.com . Ich garantiere, viele Web-Entwickler haben diese Fehler auf ihrer Seite und sie nicht einmal wissen.

Sie es selbst prüfen Sie ... bewegen Sie die Maus um die Seite von beiden Seiten. Beachten Sie stellt sich auf einen Text-Select-Cursor, wenn es nicht sollte.

Scheint, wie es einfach sein würde, mit der cursor Eigenschaft zu beheben, aber das Problem richtiges Text-select-Cursor-Verhaltens Auslösung wäre, wenn erforderlich.

War es hilfreich?

Lösung

Ist es zu Hacky explizit angeben, über welche Cursor gehen sollte, wo? 

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 ..

Andere Tipps

Ich bin mir ziemlich sicher, dass ich es vorher begegnet ist, aber es ist wahrscheinlich ein bisschen zu subtil, um wirklich in einem gewissen oberflächlichen Browser-Test feststellen. Aber ich habe sicherlich auch festgelegt hatte Probleme durch eine Hintergrundfarbe festlegen.

Soweit ich sagen kann, ist der beste Weg, um es zu beheben, ist das Element zu positionieren, um die Probleme zu verursachen, oder fügen Sie um eine positionierte Wrapper div. Sie würden höchstwahrscheinliche Verwendung position: relative, obwohl absolute und fixed sollten auch funktionieren.

Die Positionierung des Elements selbst in der Regel funktioniert, aber ein Wrapper div Hinzufügen könnte konsequenter arbeiten.

z. Hinzufügen position: relative zum .post-text Klasse Updates, die auf dieser Seite den Cursor auf die Fragen und Antworten.

Die transparenten GIF-Werke 1x1 Pixel und ist auch eine ausgezeichnete Lösung für diese und andere Fehler im IE 6 bis 8 ich etwas zu meinen bedingten Kommentaren für alle IE hinzufügen würde: 

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

Haben Sie versucht Einstellung background-color:transparent; explizit? Heißt das helfen?

Das mag wie eine hässliche Hack klingen, aber haben Sie versucht, eine transparente 1x1 Pixel GIF (AKA Spacer) als Hintergrund einstellen?

Das ist nicht perfekt, aber für dieses kleine Beispiel scheint es für IE 7 zu arbeiten. 

<!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>

Ich habe keine Ahnung, warum dies scheint zu funktionieren, und es ist sicherlich nicht ideal. Aus irgendeinem Grund, das p-Element in einem Inline relativ positioniert div setzen macht sich der Mauszeiger mehr verhalten wie ich erwarten würde.

Ich bin nicht sicher, dass dies in einem weiteren Sinne funktioniert, obwohl, wenn es eine Hierarchie von Elementen ist.

Ich weiß, dies ist keine perfekte Antwort, aber es könnte andere Ideen anspornen.

Delilah-Lösung, nur ein wenig vereinfacht funktioniert gut für mich und auch löst Mercators Problem. 

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

Das Problem ist, dass Sie eine andere CSS-Datei erstellen haben und adressieren Sie diese mithilfe der bedingten Kommentare nicht zu bremsen andere Browser.

PS:. Dieses Problem wird sehr ärgerlich mit dunklem Hintergrund Websites

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top