CSS-Text-Cursor ie7, seltsames Verhalten

Seltsame hier, in der Hoffnung, ein Feedback zu bekommen, um mich in die richtige Richtung zu zeigen.CSS-Text-Cursor ie7, seltsames Verhalten

Wenn meine #wrapper oder eine der untergeordneten divs keine Hintergrundfarbe haben, ändert ie7 den normalen "Zeiger" -Cursor in einen "text-select" -Cursor, wenn die Maus um die Seite bewegt wird (egal ob Maus über Text) oder nicht).

Ich dachte, ich hätte das Problem vor einiger Zeit behoben, aber wenn ich die Hintergrundfarbe von meinem #wrapper oder einem der Kinder divs entferne, tritt das Problem wieder auf.

Ich suche nur nach Hinweisen oder was ich überprüfen sollte.

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

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

EDIT:

scheint zu sein, weil die divs "hasLayout", aber ich noch nicht sicher bin, wie man es beheben. Siehe this link.

EDIT 2: "IE7 Bug"

ich keine weitere Informationen über diese finden Jeder, der irgendwelche Ideen hat, oder auch wenn Sie diesen Fehler kennen und ihn einfach wissen lassen können, damit ich weiß, dass ich nicht verrückt bin. Ich werde wieder sehr frustriert von Microsoft. Ich habe diese Woche schon ein paar zusätzliche Stunden Arbeit gekostet. Scheint so, als würde es nie enden.

EDIT 3:

Hier another link von jemandem mit dem gleichen Problem.

EDIT 4:

STACKOVERFLOW.com leidet unter diesem Problem! So auch mashable.com. Ich garantiere, dass viele Web-Entwickler diesen Fehler auf ihrer Website haben und sie wissen es nicht einmal.

Überprüfen Sie es selbst ... Bewegen Sie den Mauszeiger über die Seite einer der beiden Seiten. Beachten Sie, dass es sich um einen Text-Cursor handelt, wenn dies nicht der Fall ist.

Scheint so, als wäre es leicht, mit der cursor Eigenschaft zu beheben, aber das Problem würde das richtige Text-Select-Cursor-Verhalten auszulösen, wenn erforderlich.

Quelle

2009-10-25 Jeff

Könnten Sie zeigen zu einem Live-Beispiel? Ich bin mir nicht sicher, ob das Problem in diesen Zeilen liegt ... –

Ja, Live-Beispiel über den Link, den ich gerade gepostet habe. Laden Sie die Datei auf die Testseite herunter und öffnen Sie sie in ie7, um sie direkt zu sehen. – Jeff

Du bist nicht verrückt. Und ich habe andere Probleme gefunden, die Ursachen haben, aber noch keine Lösung. – tahdhaze09

Ist es zu hacky, um explizit anzugeben, welcher Cursor wohin gehen soll?

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

Quelle

2009-11-04 03:02:35 Zoe

Das repariert es immer noch nicht vollständig. Der Textcursor erscheint dann auf dem gesamten Block, einschließlich etwaiger Füll- und Leerzeichen auf einer teilweise gefüllten letzten Zeile, anstelle beispielsweise nur des eigentlichen Textes. – mercator

Einverstanden. Tolle Idee, eine, die ich schon ausprobiert habe, aber aus dem von mercator genannten Grund nicht schneidet. – Jeff

Hmmm, brauche es * das * präzise, oder? Oh mein Lieber .. bitte sehen Sie sich meinen Kommentar zu der Frage an, die ein wenig mehr Informationen über die Argumentation verlangt. – Zoe

Haben Sie die Einstellung background-color:transparent; explizit versucht? Hilft das?

Quelle

2009-10-25 18:43:22 stephenhay

Ja, probier es aus. Funktioniert nicht.Ich denke, ich hoffe, dass jemand mir etwas "Google" geben kann. Es scheint seltsam, dass nicht viele Leute das schon einmal erlebt haben. – Jeff

Schade: Ich dachte transparent wäre genug von einem "Hintergrund", um zu verhindern, dass es passiert. Ich nehme an, Sie wollen keinen Hintergrund? Andernfalls könnten Sie einen in einem IE7-Stylesheet über bedingte Kommentare hinzufügen. Es scheint einer dieser Rendering-Fehler zu sein, für den es keine vernünftigen Workarounds gibt. (Javascript?) Sorry, ich konnte nicht helfen. – stephenhay

Ja, meine einzige Idee ist bisher, mein CSS zu vermasseln und eine "Hintergrundfarbe" zu erstellen, die zum Hauptteil meiner Seite passt - NUR FÜR IE7, Lol. – Jeff

Das klingt vielleicht wie ein hässlicher Hack, aber haben Sie versucht, ein transparentes 1x1 px GIF (AKA spacer) als Hintergrund zu setzen?

Quelle

2009-10-29 22:26:39 Seb

Ich habe das nicht versucht, aber wenn es dazu kommt, würde ich lieber eine Hintergrundfarbe einstellen. Guter Vorschlag, obwohl. – Jeff

Das klingt gut. @Jeff: Hat es geholfen? –

Dies ist nicht perfekt, aber für dieses kleine Beispiel scheint es für den IE zu arbeiten 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>

Ich habe keine Ahnung, warum dies scheint zu funktionieren, und es ist sicherlich nicht ideal. Aus irgendeinem Grund versetzt das Setzen des p-Elements in ein inline relativ positioniertes div den Mauscursor mehr wie ich es erwarte.

Ich bin mir nicht sicher, dass dies im weiteren Sinne funktioniert, wenn es eine Hierarchie von Elementen gibt.

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

Quelle

2009-10-31 18:42:19

Ich bin mir ziemlich sicher, dass ich es schon einmal gesehen habe, aber es ist wahrscheinlich ein bisschen zu subtil, um es bei einigen oberflächlichen Browser-Tests wirklich zu bemerken. Aber ich habe sicherlich auch Probleme durch Festlegen einer Hintergrundfarbe behoben.

Soweit ich feststellen kann, ist der beste Weg, um es zu beheben, das Element zu positionieren, das die Probleme verursacht, oder fügen Sie ein positioniertes Wrapperdiv um es hinzu. Sie würden höchstwahrscheinlich position: relative verwenden, obwohl absolute und fixed auch funktionieren sollten.

Das Positionieren des Elements selbst funktioniert normalerweise, aber das Hinzufügen eines Wrapperdivs funktioniert möglicherweise konsistenter.

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

Quelle

2009-11-03 23:29:59 mercator

Das Hinzufügen von 'position: relative;' zu meinem #wrapper machte keinen Unterschied für mich. Um meinen Wrapper zu verpacken, naja, ich würde lieber mit dem Cursor Kuriosität leben. =) – Jeff

Fair genug. Ich bin jedoch neugierig, fügt das Hinzufügen des extra positionierten Wrappers das Problem hinzu? – mercator

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

Das Problem ist, dass Sie eine andere CSS-Datei erstellen und mit bedingten Kommentaren adressieren müssen, um andere Browser nicht zu bremsen.

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

Quelle

2010-08-13 23:33:26 puijob

Die transparenten 1x1 Pixel GIF Werke und ist auch eine hervorragende Lösung für This 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'); 
}

Quelle

2011-02-22 15:04:16 Miroslav

Antwort

Verwandte Themen