Як позбутися від зміщення елемента за допомогою CSS?

У мене проблема позиціонування з деякими елементами, оглянувши її IE8 Developer tools, він показує мені це:

Зараз я майже впевнений, що моя проблема полягає в тому, що компенсується 12, але як його видалити ? Я не можу знайти жодної згадки про властивість зміщення CSS. Чи потрібен нам компенсація на додаток до маржі?

Ось код, який виробляє це:

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

Елемент зі зміщенням є inputBox

Це зміщення в основному є позицією x, y, яку браузер розрахував для елемента на основі його атрибута css позиції. Отже, якщо ви поставите <br>перед ним або будь-який інший елемент, це змінить зміщення. Наприклад, ви можете встановити для нього значення 0 за допомогою:

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

або

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

Тому, яка б проблема з позиціонуванням у вас не була, це не обов’язково проблема зі зміщенням, хоча ви завжди можете виправити це, граючи з атрибутами верхнього, лівого, правого та нижнього елементів.

Ваша проблема несумісність браузера?

Для мене саме vertical-align: baselinevs vertical-align: topспричинило верхній зсув.

Спробуйте встановити vertical-align: top

Швидке виправлення:

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

це повинно збалансувати ці зсуви, але, можливо, вам слід поглянути на весь ваш макет і подивитися, як це поле взаємодіє з іншими вікнами.

Що стосується термінології, left, right, topі bottomє CSS зміщення властивості. Вони використовуються для позиціонування елементів в певному місці (при використанні absoluteабо fixedпозиціонування), або перемістити їх щодо їх розташування по замовчуванням (при використанні з relativeпозиціонуванням). З іншого боку, поля визначають проміжки між ящиками, і вони іноді згортаються, тому їх не можна надійно використовувати як компенсації.

Але зверніть увагу, що у вашому випадку цей зсув може не обчислюватися (виключно) із зміщення CSS.

Встановлення для властивостей верхнього та лівого значення негативних значень може бути не найкращим рішенням, якщо ваша проблема полягає лише в тому, що ви перебуваєте в режимі химерності. Це може статися, якщо на сторінці не вистачає <!DOCTYPE>декларації, що спричиняє її рендеринг у химерних режимах в IE8. У IE8 Developer Tools переконайтеся, що в меню «Режим документа» не вибрано «Режим примх». Якщо його вибрано, можливо, вам доведеться додати відповідну <!DOCTYPE>декларацію.

Якщо ви використовуєте інструменти розробника IE, переконайтеся, що випадково не залишили їх у старіших налаштуваннях. Я зводив з розуму цю ж проблему, поки не побачив, що для неї встановлено стандарти Internet Explorer 7. Змінив його на Internet Explorer 9 Standards, і все встало на свої місця.

рухомий елемент зверху: -12 пікселів або його розташування абсолютно не вирішує проблему, а лише маскує її

У мене була та сама проблема - перевірте, чи є в вас один елемент обтікання змішаним: плаваючі елементи з неплаваючими - мій неплаваючий елемент спричинив це дивне зміщення до плаваючого

Визначте поле та відступ для елемента, який стикається з проблемою:

#element_id {margin: 0; padding: 0}  

і подивіться, чи існує проблема. IE робить сторінку з більш небажаним успадкуванням. вам слід зупинити це від цього.

Це здається дивним, але ви можете спробувати встановити vertical-align: topзначення CSSдля входів. Це виправляє це принаймні в IE8.

У мене була та сама проблема на нашому веб-сайті, заснованому на .NET, що працює на DotNetNuke (DNN), і що для мене це вирішило, це, по суті, просте скидання полів тегу форми. Веб-сайти, засновані на .NET, часто обгортаються формою, і без скидання поля ви можете спостерігати, як іноді виникає дивне зміщення, здебільшого, коли є деякі сценарії.

Отже, якщо ви намагаєтеся вирішити цю проблему на своєму веб-сайті, спробуйте ввести це у свій файл CSS:

form {
  margin: 0;
}

Ви можете застосувати скидання css, щоб позбутися цих `` за замовчуванням ''. Ось приклад скидання css http://meyerweb.com/eric/tools/css/reset/ . Просто застосуйте стилі скидання ПЕРЕД власними стилями.

У мене була та сама проблема. Зсув з’явився після оновлення UpdatePanel. Рішенням було додати порожній тег перед UpdatePanel таким чином:

<div></div>

...

Просто встановіть контур так, щоб не було

[Ідентифікатор] {контур: немає; }

У моєму випадку зміщення було додано до користувацького елементу з розташуванням сітки в межах li, тоді як ul був вертикальним флексбоком.

Досить простим рішенням було встановити дефініт li як елемент блоку за допомогою

li {
 display: block;
}

І залік пропав