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

Question

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

у меня есть проблема позиционирования с некоторыми элементами, после проверки его IE8 Developer tools он показывает мне это:

Where does offset come from?

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

605 12

html css internet-explorer user-interface

12 ответов:

Comments

Ничего не найдено.

Neo · Accepted Answer · 2012-08-23 18:12:59

это смещение в основном является позицией x,y, которую браузер рассчитал для элемента на основе его атрибута CSS position. Так что если вы ставите <br> перед ним или любым другим элементом он изменит смещение. Например, вы можете установить его в 0, на:
#inputBox{position:absolute;top:0px;left:0px;}
или
#inputBox{position:relative;top:-12px;left:-2px;}
поэтому, какая бы проблема позиционирования у вас ни была, это не обязательно проблема со смещением, хотя вы всегда можете исправить ее,играя с верхними,левыми, правыми и нижними атрибутами.

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

Richard · Accepted Answer · 2012-09-14 12:58:12

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

Alin Purcaru · Accepted Answer · 2011-01-27 17:04:37

быстро исправить:
position: relative;
top: -12px;
left: -2px;
это должно уравновесить эти смещения, но, возможно, вам следует взглянуть на весь ваш макет и посмотреть, как эта коробка взаимодействует с другими коробками.

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

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

regularmike · Accepted Answer · 2012-03-14 23:11:03

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

Tom McGee · Accepted Answer · 2013-10-18 20:45:01

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

Picard · Accepted Answer · 2014-11-10 12:51:50

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

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

Trix · Accepted Answer · 2013-06-21 00:30:57

определить margin и padding для элемента сталкивается с проблемой:
#element_id {margin: 0; padding: 0}  
и посмотреть, если проблема существует. IE отображает страницу с более нежелательным наследованием. вы должны остановить его от этого.

BrainCoder · Accepted Answer · 2014-06-30 12:29:20

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

Vlastique · Accepted Answer · 2016-06-08 07:46:44

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

поэтому, если вы пытаетесь исправить эту проблему на своем сайте, попробуйте ввести это в свой файл CSS:
form {
  margin: 0;
}

sawe · Accepted Answer · 2011-11-08 07:35:06

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

mitkob · Accepted Answer · 2012-03-27 10:13:47

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

Daniel Barde · Accepted Answer · 2013-06-08 18:40:35

просто установите контур в none, как это

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