Jak pozbyć się przesunięcia elementu za pomocą CSS?

Mam problem z pozycjonowaniem niektórych elementów, po sprawdzeniu go Narzędzia programistyczne IE8 pokazuje mi to:

Teraz jestem prawie pewien, że moim problemem jest przesunięcie 12, ale jak to usunąć ? Nie mogę znaleźć żadnej wzmianki o właściwości przesunięcia CSS. Czy oprócz marży potrzebujemy przesunięcia?

Oto kod, który to tworzy:

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

Element z odsunięciem to inputBox

To przesunięcie jest w zasadzie pozycją x, y, którą przeglądarka obliczyła dla elementu na podstawie jego atrybutu pozycji css. Więc jeśli umieścisz <br>przed nim lub jakikolwiek inny element, zmieni to przesunięcie. Na przykład możesz ustawić ją na 0 przez:

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

lub

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

Dlatego też każdy problem z pozycjonowaniem niekoniecznie jest problemem z przesunięciem, chociaż zawsze możesz go naprawić, grając z atrybutami góra, lewo, prawo i dół.

Czy Twój problem jest niezgodny z przeglądarką?

Dla mnie to vertical-align: baselinevs vertical-align: topbyło przyczyną górnego przesunięcia.

Spróbuj ustawić vertical-align: top

Szybka naprawa:

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

powinno to zrównoważyć te przesunięcia, ale może powinieneś przyjrzeć się całemu układowi i zobaczyć, jak to pudełko współdziała z innymi ramkami.

Jeśli chodzi o terminologię, left, right, topi bottomsą CSS przesunięcie właściwości. Służą do pozycjonowania elementów w określonej lokalizacji (gdy są używane z pozycjonowaniem absolutelub fixed) lub do przenoszenia ich względem ich domyślnego położenia (w przypadku używania z relativepozycjonowaniem). Z drugiej strony marginesy określają przerwy między polami i czasami się zwijają, więc nie można ich niezawodnie wykorzystać jako przesunięcia.

Pamiętaj jednak, że w twoim przypadku to przesunięcie może nie być obliczane (wyłącznie) z offsetów CSS.

Ustawienie właściwości top i left na wartości ujemne może nie być dobrym obejściem, jeśli problem polega po prostu na tym, że jesteś w trybie dziwactw. Może się tak zdarzyć, jeśli na stronie brakuje <!DOCTYPE>deklaracji, co powoduje, że jest ona renderowana w trybie dziwactw w IE8. W Narzędziach dla programistów IE8 upewnij się, że „Tryb osobliwości” nie jest zaznaczona w opcji „Tryb dokumentu”. Jeśli jest zaznaczona, może być konieczne dodanie odpowiedniej <!DOCTYPE>deklaracji.

Jeśli używasz narzędzi programistycznych IE, upewnij się, że przypadkowo nie zostawiłeś ich w starszym ustawieniu. Szalałem z powodu tego samego problemu, dopóki nie zobaczyłem, że jest ustawiony na Internet Explorer 7 Standards. Zmieniłem go na standardy Internet Explorera 9 i wszystko wróciło na swoje miejsce.

przesuwanie elementu góra: -12px lub pozycjonowanie go absolutnie nie rozwiązuje problemu, a jedynie go maskuje

Miałem ten sam problem - sprawdź czy masz w jednym zawijaniu mieszane elementy: elementy pływające z niepływającymi - mój niepływający element spowodował dziwne przesunięcie względem pływającego

zdefiniuj margines i wypełnienie elementu, którego dotyczy problem:

#element_id {margin: 0; padding: 0}  

i zobacz, czy istnieje problem. IE renderuje stronę z bardziej niechcianym dziedziczeniem. powinieneś to powstrzymać.

To wydaje się dziwne, ale można spróbować ustawienia vertical-align: topw CSSodniesieniu do wejść. To przynajmniej rozwiązuje problem w IE8.

Miałem ten sam problem na naszej stronie internetowej opartej na .NET, działającej na DotNetNuke (DNN) i tym, co go dla mnie rozwiązało, było po prostu proste zresetowanie marginesu tagu formularza. Witryny oparte na platformie .NET są często opakowane w formę i bez resetowania marginesów można czasem zobaczyć dziwne przesunięcie, głównie wtedy, gdy są dołączone jakieś skrypty.

Jeśli więc próbujesz rozwiązać ten problem w swojej witrynie, spróbuj wpisać to w pliku CSS:

form {
  margin: 0;
}

Możesz zastosować reset css, aby pozbyć się tych „domyślnych”. Oto przykład resetowania css http://meyerweb.com/eric/tools/css/reset/ . Po prostu zastosuj resetowane style PRZED własnymi stylami.

Miałem ten sam problem. Przesunięcie pojawiło się po odświeżeniu UpdatePanel. Rozwiązaniem było dodanie pustego tagu przed UpdatePanel w następujący sposób:

<div></div>

...

Po prostu ustaw kontur na żaden w ten sposób

[Identyfikator] {zarys: brak; }

W moim przypadku przesunięcie zostało dodane do niestandardowego elementu z układem siatki w li, podczas gdy ul był pionowym flexboxem.

Dość prostym rozwiązaniem było ustawienie zdefiniowania li jako elementu blokowego za pomocą

li {
 display: block;
}

A offset zniknął