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

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

Теперь я уверен, что моя проблема в том, что 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

Ответ 1

Это смещение - это в основном позиция x, y, которую браузер вычислил для элемента на основе его атрибута css позиции. Поэтому, если вы поместите <br> перед ним или любым другим элементом, это изменит смещение. Например, вы можете установить его на 0:

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

или

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

Поэтому любая проблема с позиционированием не обязательно связана со смещением, хотя вы всегда можете ее исправить, играя с верхними, левыми, правыми и нижними атрибутами.

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

Ответ 2

Для меня это было vertical-align: baseline против vertical-align: top которая вызывала верхнее смещение.

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

Ответ 3

Быстрое исправление:

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

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

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

Ответ 7

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

Итак, если вы пытаетесь исправить эту проблему на своем сайте, попробуйте ввести это в свой файл CSS:

form {
  margin: 0;
}

Ответ 8

определить маржу и прописку для элемента перед проблемой:

#element_id {margin: 0; padding: 0}

и посмотрите, существует ли проблема. IE отображает страницу с более нежелательным наследованием. вы должны прекратить это делать.

Ответ 9

Это кажется странным, но вы можете попробовать установить vertical-align: top в CSS для ввода. Это исправляет его в IE8, по крайней мере.

Ответ 10

Вы можете применить reset css, чтобы избавиться от этих значений по умолчанию. Ниже приведен пример reset css http://meyerweb.com/eric/tools/css/reset/. Просто примените стили reset до ваших собственных стилей.

Ответ 11

У меня была та же проблема. Смещение появилось после обновления UpdatePanel. Решение заключалось в том, чтобы добавить пустой тег перед UpdatePanel следующим образом:

<div></div>

...

Ответ 12

Просто настройте контур на никому, кроме этого

[Идентификатор] { не очертить: нет; }

Ответ 13

В моем случае смещение было добавлено к пользовательскому элементу с разметкой сетки внутри li, в то время как ul был вертикальным flexbox.

Довольно простым решением было установить определение li как блочного элемента с

li {
 display: block;
}

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