it-swarm.com.de

Wie entferne ich den Versatz eines Elements mit CSS?

Ich habe ein Positionierungsproblem mit einigen Elementen. Wenn ich die IE8-Entwicklerwerkzeuge inspiziere, zeigt es mir Folgendes:

Where does offset come from?

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

Hier ist der Code, der dies produziert:

 <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

86
m.edmondson

Dieser Versatz ist im Wesentlichen die XY-Position, die der Browser für das Element basierend auf seinem Position-CSS-Attribut berechnet hat. Wenn Sie also einen <br> vor ein anderes Element setzen, ändert sich der Versatz. Zum Beispiel könnten Sie es auf 0 setzen:

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

oder

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

Unabhängig davon, welches Positionierungsproblem Sie haben, ist dies nicht unbedingt ein Problem mit dem Versatz, obwohl Sie es immer beheben können, indem Sie mit den Attributen oben, links, rechts und unten spielen. 

Ist Ihr Problem mit dem Browser nicht kompatibel?

42
Neo

Für mich war es vertikal ausgerichtet: Grundlinie vs. vertikal ausgerichtet: oben, was den oberen Versatz verursacht hat.

29
Richard

Schnelle Lösung:

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

dies sollte diese Versätze ausgleichen, aber vielleicht sollten Sie sich Ihr gesamtes Layout ansehen und sehen, wie die Box mit anderen Boxen interagiert.

In Bezug auf die Terminologie sind left, right, top und bottom CSS offset properties. Sie werden zum Positionieren von Elementen an einer bestimmten Position (bei Verwendung mit absolute oder fixed) verwendet, oder um sie relativ zu ihrer Standardposition zu verschieben (bei Verwendung mit relative). Ränder hingegen geben Lücken zwischen Boxen an, die manchmal zusammenfallen, sodass sie nicht zuverlässig als Offsets verwendet werden können.

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

9
Alin Purcaru

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

3
regularmike

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

2
Tom McGee

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

Ich hatte das gleiche Problem - überprüfen Sie, ob Sie in einem Umhüllungselement gemischt sind: schwebende Elemente mit nicht schwebenden Elementen - mein nicht schwebendes Element verursachte diesen merkwürdigen Versatz zum schwebenden Element

2
Picard

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

1
BrainCoder

Ich hatte das gleiche Problem auf unserer .NET-basierten Website, die unter DotNetNuke (DNN) ausgeführt wurde. Was für mich gelöst wurde, war im Wesentlichen ein einfacher Margin Reset des Form-Tags. .NET-basierte Websites werden häufig in ein Formular verpackt. Wenn Sie den Rand nicht zurücksetzen, können Sie den seltsamen Versatz manchmal sehen, meistens wenn einige Skripts enthalten sind. 

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

form {
  margin: 0;
}
1
Vlastique

definieren Sie den Rand und die Auffüllung für das Element, bei dem das Problem auftritt: 

#element_id {margin: 0; padding: 0}  

und sehen, ob ein Problem besteht. IE rendert die Seite mit mehr unerwünschter Vererbung. Du solltest es aufhalten.

1
Trix

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

0
sawe

In meinem Fall wurde der Versatz zu einem benutzerdefinierten Element mit Rasterlayout innerhalb eines li hinzugefügt, während das ul eine vertikale Flexbox war.

enter image description here

Die ziemlich einfache Lösung war, das li als Blockelement mit zu definieren

li {
 display: block;
}

Und der Offset war weg

Setzen Sie einfach den Umriss auf keine davon

[Bezeichner] { Umriss: keine; }

0
Daniel Barde

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

<div></div>

...

0
mitkob