Модель обозревателя Internet Explorer - что такое офсет?

Я пытаюсь адаптировать сайт для поддержки IE 7. У меня есть несколько элементов, которые, однако, смещены вправо на 69 пикселей. Я тестирую в IE9, чтобы отображать страницу так, как если бы это был IE7. Когда я включаю режим разработчика и проверяю элемент, я замечаю, что вокруг "поля" есть параметр "offset".

Я никогда не слышал об этом раньше, и Googling не очень помог мне - мне только удалось найти что-то о плавающем смещении, что было не то же самое, но я предполагаю, что он должен был устранить некоторые из проблем режим quirks? Как я могу устранить этот параметр offset?

Очевидно, что у меня установлена специальная таблица стилей IE-7, и вы можете сами проверить эту проблему, перейдя в мою тестовую среду по этой ссылке:

http://suitable.amok-adhoc.com/2012/

Решено:

Нашел решение - это было довольно просто. Просто нужно было явно объявить позицию подобным образом (хотя она была унаследована от родительского элемента во всех других браузерах, IE добавил маржу и назвал ее "смещением", что было отменено, сделав это):

p {
    left:0px;
}

Ответы

Ответ 1

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

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

Если мы проверим этот элемент в Internet Explorer 10, мы увидим смещение, которое вы упомянули. Значения em были преобразованы в пиксели, но эффект все еще виден. Обратите внимание, что мы видим что-то подобное в Chrome Developer Tools (также в Opera), но вместо этого оно помечено как "позиция":

Как ни странно, Firefox даже не может сообщать о смещении/позиции по их иллюстрации:

В конце концов, это проблема простой семантики. Будем ли мы называть это "смещением" или "позицией", это все равно одно и то же; это расстояние от исходного местоположения на экране.

Надеюсь, что это поможет.

Ответ 2

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

Ответ 3

У меня была аналогичная проблема, моя ширина заголовка заголовка не отображалась корректно (появлялась в ширине сокращений), после некоторой отладки я понял, что добавил rem Poly-fill, которая создавала проблему для меня. Я тоже использовал meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1").

После удаления файла rem-polyfil JS он начал работать правильно для меня.

Ответ 4

Вы можете попробовать: position: -ms-device-fixed; этот трюк помогает мне.