it-swarm.com.ru

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

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

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

86
m.edmondson

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

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

или же

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

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

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

42
Neo

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

29
Richard

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

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

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

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

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

9
Alin Purcaru

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

3
regularmike

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

2
Tom McGee

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

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

2
Picard

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

1
BrainCoder

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

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

form {
  margin: 0;
}
1
Vlastique

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

#element_id {margin: 0; padding: 0}  

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

1
Trix

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

0
sawe

Просто установите контур, чтобы ни один, как это

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

0
Daniel Barde

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

<div></div>

...

0
mitkob