wake-up-neo.com

Internet Explorer-Boxmodell - Was ist Offset?

Ich versuche, eine Site so anzupassen, dass sie IE 7 unterstützt. Ich habe jedoch einige Elemente, die um 69px nach rechts versetzt werden. Ich teste in IE9 und setze die Seite so, als wäre sie IE7. Wenn ich den Entwicklermodus einschalte und das Element inspiziere, stelle ich fest, dass es um den "Rand" herum einen Parameter namens "Versatz" gibt.

Ich habe noch nie davon gehört und Googling hat mir nicht viel weitergeholfen - ich habe nur etwas über Float-Offset gefunden, was nicht das Gleiche war, aber ich gehe davon aus, dass es einige Probleme mit dem Quirks-Modus beseitigte. Wie kann ich diesen Offset-Parameter beseitigen? 

Offensichtlich habe ich ein IE-7-spezifisches Stylesheet eingerichtet, und Sie können das Problem selbst testen, indem Sie meine Testumgebung über diesen Link aufrufen:

http://suitable.amok-adhoc.com/2012/

Gelöst:

Eine Lösung gefunden - es war ziemlich einfach. Ich musste nur die Position explizit so deklarieren (obwohl sie in allen anderen Browsern vom übergeordneten Element geerbt wurde. IE fügte einen Rand hinzu und nannte ihn "offset", was hierdurch überschrieben wird):

p {
    left:0px;
}
34
funkylaundry

Der Versatz ist der Abstand, um den das Element aus seiner ursprünglichen Position verschoben wurde. Dies ist zu sehen, wenn Sie Position ein Element entweder relativ oder absolut mit den Werten left, top, bottom und/oder right haben. Nehmen Sie den folgenden Code als Beispiel:

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

Wenn wir dieses Element in Internet Explorer 10 untersuchen, sehen wir den Offset , den Sie erwähnt haben. Die em-Werte wurden in Pixel konvertiert, der Effekt ist jedoch noch sichtbar. Beachten Sie, dass wir in den Chrome Developer Tools (auch in Opera) etwas Ähnliches sehen. Stattdessen wird es als "Position" bezeichnet:

enter image description hereenter image description here

Merkwürdigerweise scheint Firefox den Versatz/die Position nicht einmal anhand ihrer Abbildung zu kommunizieren:

enter image description here

Am Ende ist dies eine Frage der bloßen Semantik. Ob wir es "Offset" oder "Position" nennen, es ist immer noch dasselbe; Dies ist die Entfernung von der ursprünglichen Position auf dem Bildschirm.

Hoffe das hilft.

32
Sampson

Dies scheint seltsam, aber Sie können versuchen, vertical-align: top in der CSS für die Eingaben einzustellen. Das behebt es zumindest in IE8.

2
BrainCoder

Ich hatte ein ähnliches Problem. Die Breite des Kopfzeilenmenüs wurde nicht richtig angezeigt (wurde in verkleinerter Breite angezeigt). Nach einigem Debuggen wurde mir klar, dass ich rem hinzugefügt habe. Ich habe auch meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1") benutzt. 

Nach dem Entfernen der rem-polyfil JS-Datei funktionierte es für mich korrekt.

0
Muhammad Hannan

Sie können versuchen, Folgendes zu verwenden: position: -ms-device-fixed; Dieser Trick hilft mir.

0
mac.slusarek