Как избавиться от смещения элемента с помощью CSS?

У меня проблема с позиционированием некоторых элементов, после проверки инструментов IE8 Developer он показывает мне следующее:

Теперь я почти уверен, что моя проблема в смещении 12, но как его удалить ? Я не могу найти упоминания о свойстве смещения CSS. Нужен ли нам Offset в дополнение к марже?

Вот код, который это производит:

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

Следовательно, какая бы проблема с позиционированием у вас ни возникала, это не обязательно проблема со смещением, хотя вы всегда можете исправить ее, поиграв с атрибутами top, left, right и bottom.

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

Для меня это был vertical-align: baselinevs, vertical-align: topкоторый стал причиной максимального смещения.

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

Быстрая починка:

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

это должно сбалансировать эти смещения, но, возможно, вам стоит взглянуть на весь макет и посмотреть, как этот блок взаимодействует с другими блоками.

Что касается терминологии, left, right, topи bottomявляются CSS смещение свойства. Они используются для позиционирования элементов в определенном месте (при использовании с позиционированием absoluteили fixed) или для перемещения их относительно их местоположения по умолчанию (при использовании сrelative позиционированием). С другой стороны, поля определяют промежутки между блоками, и они иногда сворачиваются, поэтому их нельзя надежно использовать в качестве смещений.

Но обратите внимание, что в вашем случае это смещение не может быть вычислено (исключительно) из смещений CSS.

Установка отрицательных значений для свойств top и left может быть не лучшим решением, если ваша проблема просто в том, что вы находитесь в режиме причуд. Это может произойти, если на странице отсутствует <!DOCTYPE>объявление, из-за чего оно отображается в режиме совместимости в IE8. В инструментах разработчика IE8 убедитесь, что «Quirks Mode» не выбран в «Document Mode». Если он выбран, вам может потребоваться добавить соответствующее <!DOCTYPE>объявление.

Если вы используете инструменты разработчика IE, убедитесь, что вы случайно не оставили для них более старые настройки. Я сводил себя с ума от этой же проблемы, пока не увидел, что она соответствует стандартам Internet Explorer 7. Изменил его на стандарты Internet Explorer 9, и все встало на свои места.

перемещение элемента вверху: -12px или его позиционирование абсолютно не решает проблему, а только маскирует ее

У меня была такая же проблема - проверьте, смешаны ли у вас в одном элементе обертывания: плавающие элементы с неплавающими - мой неплавающий элемент вызвал это странное смещение к плавающему

Определите поля и отступы для элемента, столкнувшись с проблемой:

#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;
}

И смещение пропало