Wie entferne ich den Offset eines Elements mithilfe von CSS?

Ich habe ein Positionierungsproblem mit einigen Elementen. Bei der Überprüfung der IE8 Developer-Tools wird Folgendes angezeigt:

Jetzt bin ich mir ziemlich sicher, dass mein Problem der Versatz von 12 ist, aber wie entferne ich ihn ? Ich kann keine Erwähnung einer CSS-Offset-Eigenschaft finden. Benötigen wir zusätzlich zur Marge einen Offset?

Hier ist der Code, der dies erzeugt:

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

Das Element mit dem Versatz ist inputBox

Dieser Versatz ist im Grunde die x, y-Position, die der Browser für das Element basierend auf seinem Positions-CSS-Attribut berechnet hat. Wenn Sie also ein <br>davor oder ein anderes Element einfügen, ändert sich der Versatz. Zum Beispiel könnten Sie es auf 0 setzen, indem Sie:

#inputBox{position:absolute;top:0px;left:0px;}

oder

#inputBox{position:relative;top:-12px;left:-2px;}

Daher ist jedes Positionierungsproblem, das Sie haben, nicht unbedingt ein Problem mit dem Versatz, obwohl Sie es jederzeit beheben können, indem Sie mit den Attributen oben, links, rechts und unten spielen.

Ist Ihr Problem mit dem Browser nicht kompatibel?

Für mich war es vertical-align: baselinevs vertical-align: top, das den oberen Versatz verursachte.

Versuchen Sie zu setzen vertical-align: top

Schnelle Lösung:

position: relative;
top: -12px;
left: -2px;

Dies sollte diese Offsets ausgleichen, aber vielleicht sollten Sie sich Ihr gesamtes Layout ansehen und sehen, wie diese Box mit anderen Boxen interagiert.

Wie für Terminologie left, right, topund bottomsind CSS - Offset - Eigenschaften. Sie werden zum Positionieren von Elementen an einer bestimmten Stelle verwendet (bei Verwendung mit absoluteoderfixed Positionierung) oder zum Verschieben relativ zu ihrer Standardposition (bei Verwendung mit relativePositionierung) verwendet. Ränder hingegen geben Lücken zwischen Feldern an und fallen manchmal zusammen, sodass sie nicht zuverlässig als Offsets verwendet werden können.

Beachten Sie jedoch, dass in Ihrem Fall dieser Offset möglicherweise nicht (ausschließlich) aus CSS-Offsets berechnet wird.

Das Setzen der oberen und linken Eigenschaften auf negative Werte ist möglicherweise keine gute Lösung, wenn Ihr Problem einfach darin besteht, dass Sie sich im Mackenmodus befinden. Dies kann passieren, wenn auf der Seite eine <!DOCTYPE>Deklaration fehlt und diese im IE8 im Mackenmodus gerendert wird. Stellen Sie in den IE8-Entwicklertools sicher, dass unter "Dokumentmodus" nicht "Quirks-Modus" ausgewählt ist. Wenn es ausgewählt ist, müssen Sie möglicherweise die entsprechende <!DOCTYPE>Deklaration hinzufügen .

Wenn Sie die IE-Entwicklertools verwenden, stellen Sie sicher, dass Sie sie nicht versehentlich in einer älteren Einstellung belassen haben. Ich machte mich mit demselben Problem verrückt, bis ich sah, dass es auf Internet Explorer 7-Standards eingestellt war. Es wurde in Internet Explorer 9-Standards geändert und alles rastete ein.

bewegliches Element oben: -12px oder Positionieren löst das Problem absolut nicht, sondern maskiert es nur

Ich hatte das gleiche Problem - prüfen Sie, ob Sie in einem Wrapping-Element gemischt haben: schwebende Elemente mit nicht schwebenden Elementen - mein nicht schwebendes Element verursachte diesen seltsamen Versatz zum schwebenden

Rand definieren und Auffüllen für das Element ist mit dem Problem konfrontiert:

#element_id {margin: 0; padding: 0}  

und prüfen Sie, ob ein Problem vorliegt. IE rendert die Seite mit mehr unerwünschter Vererbung. Sie sollten es daran hindern.

Dies scheint seltsam, aber Sie können versuchen, vertical-align: topdie CSSfür die Eingänge einzustellen. Das behebt es zumindest in IE8.

Ich hatte das gleiche Problem auf unserer .NET-basierten Website, die auf DotNetNuke (DNN) lief, und was es für mich löste, war im Grunde ein einfaches Zurücksetzen des Randes des Formular-Tags. .NET-basierte Websites werden häufig in ein Formular eingeschlossen. Ohne Zurücksetzen des Randes wird manchmal der seltsame Versatz angezeigt, vor allem, wenn einige Skripte enthalten sind.

Wenn Sie also versuchen, dieses Problem auf Ihrer Website zu beheben, geben Sie dies in Ihre CSS-Datei ein:

form {
  margin: 0;
}

Sie können ein Reset-CSS anwenden, um diese 'Standardeinstellungen' zu entfernen. Hier ist ein Beispiel für ein Zurücksetzen von CSS http://meyerweb.com/eric/tools/css/reset/ . Wenden Sie einfach die Rücksetzstile VOR Ihren eigenen Stilen an.

Ich hatte das gleiche Problem. Der Offset wurde nach der Aktualisierung von UpdatePanel angezeigt. Die Lösung bestand darin, vor dem UpdatePanel ein leeres Tag wie folgt hinzuzufügen:

<div></div>

...

Setzen Sie den Umriss einfach so

[Kennung] {Gliederung: keine; }}

In meinem Fall wurde der Versatz einem benutzerdefinierten Element mit Rasterlayout innerhalb eines Li hinzugefügt, während die Ul eine vertikale Flexbox war.

Die ziemlich einfache Lösung bestand darin, das Definieren des Li als Blockelement mit festzulegen

li {
 display: block;
}

Und der Offset war weg