Отрицательное верхнее поле не работает в IE 8 или 9

Question

У меня есть div с margin-top:-200px.Я хочу, чтобы div двигался вверх / позади div над ним.

Отлично работает во всех браузерах, кроме IE.margin-top:200px работает, поэтому я знаю, что проблема не в разрушающемся поле.

Есть ли здесь ошибка, о которой я не знаю?

Answer 1

IE не любит отрицательные поля и не отображает их должным образом.Расположите свои элементы относительно или абсолютно и используйте вместо них top: -200px.

Примечание: расположение их может значительно изменить макет, и вам, возможно, придется переделать ваши стили.

Answer 2

Отрицательное поле скрывает div… Вот трюк с использованием увеличения: 1, позиция: относительная

Проблема:

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

в красной области IE панели инструментовспрятатьсядаже если мы используем масштабирование: 1. чтобы избавиться от этой проблемы, нам нужно добавить также положение: относительное.

Решение:

, чтобы ваш класс CSS стал

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

http://trickyclicks.com

Answer 3

Если вышесказанное не помогает: убедитесь, что вокруг вашего нарушителя есть div. Теперь добавьте ширину 100% к нарушающему div и поместите его влево. Как это. Избавился от всего моего отрицательного поля, то есть горе ...

div.container {}
div.offender /*inside div.container*/ {
  width: 100%;
  float: left;
  margin-bottom: -20px;   /* ie fix */
  zoom: 1;                /* ie fix */
  position: relative;     /* ie fix */
  display: block;
}

Answer 4

дать положение как относительное.рекомендуется встроенный стиль.Это может вызвать проблемы, если вы используете внешний CSS.

Answer 5

Для поддержки отрицательных полей в IE я исправил аналогичные проблемы с display: table;.Другие исправления, такие как zoom: 1; и position: relative;, не всегда работают (по крайней мере, по моему опыту).Если вы хотите добавить этот стиль только в IE, я бы предложил использовать https://modernizr.com/

// using comment to show that .no-cssreflections belongs to the html tag
/*html*/.no-cssreflections .container { display: table; }