Ich versuche, ein span-Element (nennen wir es "Tooltip span") relativ zu einem Eingabefeld zu positionieren. Um dies zu tun, wickle ich die Tooltip-Spanne und das Eingabefeld in ein anderes span-Element (nennen wir es die Wrapper-Spanne) mit position: relative . Dann setze ich position: absolute auf den Tooltip-Bereich. Dadurch positioniert sich die QuickInfo-Spannweite selbst relativ zum Wrapperbereich, ist aber nicht Teil des Seitenflusses und nimmt keinen Platz ein. Das ist genau das, was ich will.
Dann setze ich mithilfe von Javascript die Position des Tooltips relativ zur Position des Eingabeelements. Da das Eingabeelement auf verschiedenen Seiten unterschiedlich gestaltet werden kann (Skript sollte global anwendbar sein), verwende ich seine Eigenschaften offsetTop und offsetLeft , um seine Position relativ zur Wrapperspanne zu berechnen.
Ich bemerke jedoch hier Inkonsistenzen zwischen Browsern. In Firefox, IE6, 7, 8 funktioniert es wie erwartet. Aber in Chrome und Safari scheint die gemeldete offsetTop , naja, falsch.
Um dies zu beweisen, habe ich die folgende Testseite erstellt:
%Vor% und in Firefox und Chrome geladen. Beide Browser melden den Wrapper-Bereich als offsetParent , aber für Firefox ist offsetTop -8 und für Chrome ist es 2. Visuell ist die Seite in beiden Browsern identisch.
Das bereitet mir Kopfschmerzen, weil ich nicht einfach einen anderen Offset einbringen kann, den ich immer anwende, wenn jemand Chrome benutzt. Wenn ich die Schriftgröße ändere, ändert sich offsetTop nicht und mein Skript bricht ab.
Ist das ein Fehler? Kann ich das anders lösen?
Verwenden Sie jQuery. DOM Unterschiede zwischen Browsern ist eines der Dinge, die es übertrifft.
Sie können versuchen,
zu verwenden %Vor%statt
%Vor%, da Explorer und Chrome erst nach dem vollständigen Laden der Bilder korrekte Offsets festlegen.
Ich hatte das gleiche Problem wie Sie und ich erkannte, dass (in meinem Fall) die Sache, die den Offset (). Top-Wert in Chrome, hatte ein oder mehrere Bilder ohne das Attribut "Höhe" über dem Element.
Vorher
%Vor%offset.top () war 100 in Chrome
offset.top () war 150 in Firefox und IE7 (ob oder nicht, es funktionierte im IE gut!)
Nach
%Vor%offset.top () ist 150 in Firefox, IE7, UND CHROME.
Beachten Sie, dass der Unterschied 50px ist, was tatsächlich der Bildhöhe entspricht.
Seit ich ein JQuery-Plugin entwickelt habe, habe ich versucht, alle Bilder, deren Attribute Breite und Höhe nicht definiert sind, zu sammeln und ihre Größe manuell mit .width () und .height () festzulegen, aber es hat nicht funktioniert. weil Chrome für beide Funktionen 0 zurückgegeben hat. Also, ich schätze, das Problem mit offset.top () hängt davon ab. Wenn JQuery triying ist, um den Wert offset.top () zu erhalten, indem die Höhe des "über" -Elements akkumuliert wird, und eines dieser Elemente ein Bild ohne festgelegte Höhe, wird dieser Summe "0" hinzugefügt, und daher der oberste Wert fehlen diese "ignorierten" Höhen.
PS: Sorry für mein Englisch, es ist lange her, seit ich einen solchen langen Text in dieser Sprache geschrieben habe!
Setzen Sie Ihren Code in eine window.onload -Funktion. Ich erinnere mich daran, Probleme zu haben, als ich versuchte, mit Dom direkt von einem <script> während des Ladens der Seite in Firefox zu arbeiten, und Webkit neigt dazu, an solchen Punkten ein vernünftiges DOM zu geben.
Dies basiert nur auf früheren Problemen, die ich festgestellt habe, ich bin mir nicht sicher, ob es für Ihren Fall anwendbar ist.
Ich stieß auf das gleiche Problem und die Funktion position () von jQuery meldete dasselbe wie die Funktion offset (). Letztendlich stellt sich heraus, dass selbst das Warten auf das Dokument nicht für mich funktionierte. Ich musste später im Flow den Offset () überprüfen (in meinem Fall in meinem Handler, der auf ein window.scroll-Ereignis ausgelöst wird).
Wenn ich diesen Testcode unten versuche, bekomme ich beim Laden der Seite verschiedene Zahlen für Firefox + Chrome. Sobald es geladen ist, kann ich jedoch 'd' drücken und ich bekomme die gleiche Zahl für beide Browser.
%Vor%Hoffe, das hilft.
Es könnte mit den verschiedenen Rand- / Randwerten für die HTML- und body-Elemente in Verbindung stehen, die Browser standardmäßig einstellen.
Tags und Links javascript html css