Блочная модель Internet Explorer - что смещено?

Question

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

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

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

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

Решено:

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

p {
    left:0px;
}

Answer 1

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

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

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

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